How To Place A Dropdown At The Top Most Right Section Of A Video In Bootstrap 4?

I have a screenshot as shown below which I have to replicate in Bootstrap 4. The above screenshot is basically a video with the dropdown at the top most extreme right. The code

Solution 1:

To achieve what you want, you may use this layout: Feel free to tweak margin/padding as per your need. You'll also need to design the dropdown button as per your screenshot.

.header-dropdown {
  position: absolute;
  display: flex;
  z-index: 1;
  padding: 0px;
  justify-content: flex-end;
  padding-right: 45px;
}

<linkrel="stylesheet prefetch"href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css"><headerclass="container border masthead_video text-white text-center"><divclass="header-dropdown container mt-5"><divclass="dropdown"><buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
   Dropdown button
   </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link 1</a><aclass="dropdown-item"href="#">Link 2</a><aclass="dropdown-item"href="#">Link 3</a></div></div></div><divclass="embed-responsive embed-responsive-16by9"><iframeclass="embed-responsive-item"src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"allowfullscreen></iframe></div></header><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>

Solution 2:

do you wont this type of output? yes then add see .demo class

.demo{
      top: 0!important;
  
    position: fixed !important;
   
    right: 0!important;
   
  
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><headerclass="container border masthead_video text-white text-center"><divclass="embed-responsive embed-responsive-16by9"><iframeclass="embed-responsive-item"src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"allowfullscreen></iframe></div><divclass="row mt-5"><divclass="col-md-10 col-lg-8 col-xl-7 mx-auto"></div></div></header><divclass="dropdown demo"><buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
   Dropdown button
   </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link 1</a><aclass="dropdown-item"href="#">Link 2</a><aclass="dropdown-item"href="#">Link 3</a></div></div>

Solution 3:

you can add new parent div for both of your code.

.page-head {
  position: relative; 
  display : block;
}

.page-head.dropdown {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

<divclass="page-head"><!-- put your 2nd code here --><!-- put your 1st code here --></div>

Solution 4:

You can add a wrapper as to wrap these two element (video & the dropdown menu).

Then you can use position: absolute to position the dropdown menu to the top right corner. The video-wrapper needed to be set with position: relative as for the dropdown menu to based on.

.video-wrapper {
  position: relative;
  width: auto;
  float: left;
}

.dropdown {
  position: absolute;
  right: 0px;
  top: 0px;
}

<headerclass="container border masthead_video text-white text-center"><divclass="video-wrapper"><divclass="embed-responsive embed-responsive-16by9"><iframeclass="embed-responsive-item"src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"allowfullscreen></iframe></div><divclass="row mt-5"><divclass="col-md-10 col-lg-8 col-xl-7 mx-auto"></div></div><divclass="dropdown"><buttontype="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">
   Dropdown button
   </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Link 1</a><aclass="dropdown-item"href="#">Link 2</a><aclass="dropdown-item"href="#">Link 3</a></div></div></div></header>