Help with positioning two buttons

Question

Stefce 146 Posting Pro

6 Years Ago

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

bootstrap css

Edited 6 Years Ago by Stefce

4 Contributors
20 Replies
446 Views
1 Week Discussion Span
Latest Post 6 Years Ago Latest Post by Damhart

All 20 Replies

JamesCherrill 4,733 Most Valuable Poster

6 Years Ago

I don't have an answer - I'm just checking that it's possible to reply now... JC

gentlemedia 803 Master Poster

6 Years Ago

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 }

gentlemedia 803 Master Poster

6 Years Ago

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?

gentlemedia 803 Master Poster

6 Years Ago

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)

gentlemedia 803 Master Poster

6 Years Ago

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!

Stefce commented: Thank you @gentlemedia :) +2

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Stefce 146 Posting Pro · Answer 1 · 2017-07-01T09:31:34+00:00

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

Stefce 146 Posting Pro · Answer 2 · 2017-07-03T11:45:36+00:00

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

Stefce 146 Posting Pro · Answer 3 · 2017-07-03T12:31:27+00:00

Yup the arrows are not visible when i resize to phone size the window. I need to move the srcollbar instead to see right arrow.. but left arrow is completly out of vision

here is picture to see
http://imgur.com/a/zA0Ch

http://imgur.com/a/aGqtl

Stefce 146 Posting Pro · Answer 4 · 2017-07-03T18:17:18+00:00

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

gentlemedia 803 Master Poster · Answer 5 · 2017-07-03T19:00:20+00:00

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.

Stefce 146 Posting Pro · Answer 6 · 2017-07-03T19:18:51+00:00

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 ..

gentlemedia 803 Master Poster · Answer 7 · 2017-07-03T21:50:44+00:00

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;
    }
}

Stefce 146 Posting Pro · Answer 8 · 2017-07-03T23:07:56+00:00

I putted the classes back now and again comes the problem with the arrows they doesnt appear at certain windows size. Here is the full code:

HTML
https://pastebin.com/ysv5Z35p

CSS
https://pastebin.com/zRxgyTLc

gentlemedia 803 Master Poster · Answer 9 · 2017-07-04T00:13:08+00:00

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
.

Stefce 146 Posting Pro · Answer 10 · 2017-07-04T00:23:29+00:00

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

gentlemedia 803 Master Poster · Answer 11 · 2017-07-04T00:31:53+00:00

gentlemedia 803 Master Poster

6 Years Ago

Do you use also Bootstrap V4?

Stefce 146 Posting Pro · Answer 12 · 2017-07-04T10:10:30+00:00

Stefce 146 Posting Pro

6 Years Ago

Nope, still on old version

gentlemedia 803 Master Poster · Answer 13 · 2017-07-04T12:49:11+00:00

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% }

}

Stefce 146 Posting Pro · Answer 14 · 2017-07-04T12:56:21+00:00

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

Damhart 0 Newbie Poster · Answer 15 · 2017-07-10T07:49:18+00:00

Lol, was just about to answer this but saw that it was already answered.

Help with positioning two buttons

Recommended Answers Collapse Answers

All 20 Replies

Recommended Answers