Search between a Gas Station

Place a background image just below the navbar bootstrap-4 Beta I want to place a background image just below the navbar with full height . If I remove Bootstrap class fixed-top then background image automatically start below the navbar. In this situation what should I do? How can I achieve this task? fixed-top header#MyHeaderControl{ height: 100vh; width: 100%; background-image:url("https://images.pexels.com/photos/1055297/pexels-photo-1055297.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="htt...

How do I make this responsive properly? I've been trying to make this slightly custom bootstrap carousel truly responsive so that the hero text & button scale correctly. I've used a mix of the grid and breakpoints but I just can't seem to be able to scale things correctly unless I use 20 breakpoints to ensure the text is the right size so it doesn't get pushed out of view. See this pen for a demo <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner...

Flexbox div is hidden on a small screen I have the following code which uses Bootstrap 4. My CSS is basically a copy of Bootstrap Sign In Form Example. The main difference is that I have a video element in a div that provides border and 1:1 ratio. The issue is that on small displays (e.g. on mobile) the first div is not shown at all, and at least half of the second div with video is hidden too. You can resize your browser window to see it. How can I fix it? I have margin: auto but seems that it doesn't help at all. margin: auto :root { --input-padding-x: .75rem; --input-padding-y: .75rem; } html, body { height: 100%; } body { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5; } .form-ordercode { width: 100%; max-width: 420px; padding: 15px; margin: auto; } .form-ordercode .form-control { position: relative; box-sizing: border-box; height: auto; pad...

Bootstrap 4 ordering class I have a question about the bootstrap 4.1 reordering. According to the documentation: Reordering Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1 .order-md-2 ). Includes support for 1 through 12 across all five grid tiers. .order-1 .order-md-2 I've tried to set the reordering only on small and medium screens, using the .order classes as showed in the docs, but it will reorder the contents also on larger breakpoints, I'm doing this wrong? .order <div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-lg-4 order-sm-2"> <!-- some contents here --> </div> <div class="col-sm-12 col-lg-8 order-sm-1"> <!-- some contents here --> </div> </div> </div> ...

bootstrap how to place a button between two column I have a grid of 8 columns, I need to add the button between them please see attachment. I'm very new in bootstrap, I'm using bootstrap 3. please suggest me the best solution and also as it is 8 columns I'm not able to manage in col-lg-12 grid it is breaking to next line , I need to place in a single row horizontal scroll can also work in this case. please suggest. Add Your Code ! – Dr. Strange 25 mins ago You may want to use explicit CSS styling instead of Bootstrap in that scenario. Especially display:grid seems useful here. – jaboja 23 mins ago display:grid By c...