CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user99999
user99999

Reputation: 2022

Fixed bootstrap row over another row

I want to create a row at the very top of a page, and another row hovering the previous one. The idea is to create two columns in the first row - col-md-3 and col-md-9, and the second row is to apply an image between those two, so the row has col-md-2, col-md-2 (image between), col-md-8. It should look like this:

enter image description here

I managed to create it, but the box between is still not fixed:

<div class="container-fluid">
   <div style="position: absolute; width: 100%;">
      <div class="row">
         <div class="col-md-2"></div>
         <div class="col-md-2" style="text-align: center; z-index: 9999;">
            <div style="background-color: red;"> # Adding position: fixed here works but breaks box width
               <img src="/assets/image/logo.jpg">
               <br>
               Something
            </div>
         </div>
         <div class="col-md-8"></div>
      </div>
   </div>
   <div class="row" style="height: 100%;">
      <div class="col-md-3" style="position: relative;">
         <div>
            <img src="/assets/image/leftImage.jpg">
         </div>
      </div>
      <div class="col-md-1"></div>
      <div class="col-md-8">
         Lorem ipsum...
      </div>
   </div>
</div>

How can I do that?

Upvotes: 0

Views: 811

Answers (1)

eylay
eylay

Reputation: 2160

You dont have to use bootstrap, You can use css:

div.container
{
  width:100%;
  position:fixed;
  background-color:red;
  height:100px;
}
div.img
{
  margin:auto;
  width:80%;
  padding:5px;
  text-align:center;
}

If you check the fiddle you can understand it better.

Upvotes: 1

Related Questions