0

I have a problem with bootstrap design i want to make a very simple page which will contain two buttons and a video. The prob. is i dont know how to align theese two buttons with the video in one row here is the code i have:

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-offset-2 text-center">

                <span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>

                <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" src="..."></iframe>
                </div>

                <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>

            </div>
        </div>
    </div>
</body>

here is an example how i want to look CLICK HERE

EDIT At the moment the arrows are up and below the video

Thank you very much

Edited by Stefan_1

4
Contributors
20
Replies
111
Views
1 Month
Discussion Span
Last Post by Damhart
Featured Replies
  • > BTW i must ask, is it easier to do this without bootstrap Well, for me it's easier to do without Bootstrap :) and CSS is really not that hard unless you have to support old IE. Glad it's sorted now! Read More

0

Other members PM me that they can not reply to this thread... Whats the problem?

0

This is a way you could do it.

Give the following tag a class for example video
<div class="col-lg-8 col-md-offset-2 text-center video">

Add this to your custom CSS, but adjust the left and right values untill your satisfied with the positioning and instead of px you're also probably better of using % if the layout is responsive.

.video { position: relative }

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }
0

why i need to enter minus values to show the arrows left and right

.video { position: relative }

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.video .glyphicon-menu-left { left: -36px }
.video .glyphicon-menu-right { right: -36px }

EDIT Also when i resize the window the arrows are not visible

Edited by Stefan_1

0

Yeah, the minus values is also a commom thing to do with a UI like this, but I didn't know that that div tag where we added the video class to, was more or less a wrapper for the embed-responsive div tag and that it spanned the same width.

Are the arrows not visibile anymore at a certain MQ breakpoint?

0

I assume that the MQ's are the default ones from Bootsrap - http://getbootstrap.com/css/#grid-media-queries - thus you could do something like this.

First add some styles to the .video CSS and we add a CSS block for this .video in a 768px MQ.

.video {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

@media (min-width: 768px) {

    .video {
        width: auto;
        margin: auto;
    }

}

You might wanna adjust the 90%. Just see what fits best or you could also use calc()to get more precise

width: calc(100% - 80px)

0

This solves the problem but another comes up.. The video at the full size windows is now too small.. here is the full code of the page

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>title</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
    .video {
        position: relative;
        width: 80%;
        margin: 0 auto;
    }

    .video .glyphicon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

    @media (min-width: 768px) {

        .video {
            width: auto;
            margin: auto;
        }

    }
    </style>

</head>

<body>
    <!-- Page Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h1>ADVERTISEMENT</h1>
            </div>
        </div>
        <hr>
        <div class="row">
            <h2>Some very nice Title!</h2>
            <div class="col-sm-8 col-md-offset-2 text-center video">

                <h1><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></h1>

                <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8"></iframe>
                </div>

                <h1><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></h1>
                <h3>Some very nice description about the video...</h3>

            </div>
        </div>
    </div>
    <!-- /.row -->
    <!-- jQuery Version 1.11.1 -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

EDIT More friendly code look: https://pastebin.com/zHV9NgZr

Edited by Stefan_1

0

It's probably because the classes .col-sm-8 or .col-md-offset-2 have set a width in bootstrap.min.css which we override with the width: auto on .video.

You will have to figure out the value of that width in the 768px MQ in bootstrap.min.css. Use the dev tools (inspect element) in your browser to see what that width should be and use that same value in your 768px MQ for the width of .video aswell.

0

When i remove the col-sm-8 col-md-offset-2 classes the video hoes full width but thats acually too large for watching and page functinality please help ..

0

You should not remove thiose classes.
Anyway... let's try something else by not messing with the width of that .video div, but just add a padding.

.video {
    position: relative;
    padding: 0 10%;
}

@media (min-width: 768px) {
    .video {
        padding: 0;
    }
}
0

It's easier for me to debug if I see a demo in Jsfiddle or codepen, so I made one myself.

https://codepen.io/gentlemedia/full/ZyoXdN/

On small screens the arrows were behind the video again, so the left and right properties gets another value on smaller screens in this case I have them both at 20px

Here's the nw CSS:

.video {
    position: relative;
    padding: 0 10%;
}

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }

@media (min-width: 768px) {

    .video { padding: 0 }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

}

Oh and by the way... don't wrap your span tags in h1 tags to make the arrows bigger in size. If you want them bigger just add a font-size in your CSS, like I did to .video .glyphicon
.

Edited by gentlemedia

0

Almost DONE... This code is good with little numbers chaning but it has one more problem at certain windows size the video goes at the very left side and as you slowly decrease the size of the window it goes back to normal try to focus on resizing and you will see what is happening

0

It's because of this rule:

@media (min-width: 768px) {

    .col-sm-8 {
        width: 66.66666667%;
    }

}

But you can override this with the following updated CSS:

.video {
    position: relative;
    padding: 0 10%;
}

.video .glyphicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2em;
}

.video .glyphicon-menu-left { left: 20px }
.video .glyphicon-menu-right { right: 20px }

@media (min-width: 768px) {

    .video {
        width: 100%;
        padding: 0;
    }

    .video .glyphicon-menu-left { left: -36px }
    .video .glyphicon-menu-right { right: -36px }

}

@media (min-width: 992px) {

    .video { width: 66.66666667% }

}

Edited by gentlemedia

0

Still same problem, i think the class col-md-offset-2 have something with this problem but am not sure? BTW i must ask, is it easier to do this without bootstrap, just with clean CSS? If yes lets do it that way.

EDIT I really want this to be done in clean bootstrap if is possible but also in CSS too, just for learning purposes.

EDIT 2 The problem is fixed with the last UPDATED CSS, i really dont know my localhost is so slow with updating the code

Edited by Stefan_1

1

BTW i must ask, is it easier to do this without bootstrap

Well, for me it's easier to do without Bootstrap :) and CSS is really not that hard unless you have to support old IE.

Glad it's sorted now!

Votes + Comments
Thank you @gentlemedia :)
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.