html - Fixed bootstrap row over another row -


i want create row @ top of page, , row hovering previous one. idea create 2 columns in first row - col-md-3 , col-md-9, , second row apply image between two, row has col-md-2, col-md-2 (image between), col-md-8. should this:

enter image description here

i managed create it, box between 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 breaks box width                <img src="/assets/image/logo.jpg">                <br>                            </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 that?

you dont have use bootstrap, 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 check fiddle can understand better.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -