html - Responsive layout with nested divs using bootstrap -


responsive layout nested divs using bootstrap here html code

  <div class="container-fluid" style="height: 350px;">         <div class="row-fluid clearfix" style="height: 100%">             <div class="col-md-9 column" style="height: 100%;">                 <div class="row clearfix" style="height: 50%;">                     <div class="col-md-4 column" style="height: 100%;background-color: red">                     </div>                     <div class="col-md-4 column" style="height: 100%;background-color: green">                     </div>                     <div class="col-md-4 column" style="height: 100%;background-color: blue">                     </div>                 </div>                 <div class="row clearfix" style="height: 50%;">                     <div class="col-md-12 column" style="height: 100%;background-color: pink">                     </div>                 </div>             </div>             <div class="col-md-3 column" style="height: 100%;background-color: yellow">             </div>         </div>     </div> 

output:

responsive layout

while increasing browser screen width

here output after increasing

after increasing browser size

here green , blue colored div missing

my expected output:

expected output

please me out..

you need define classes mobile view well, otherwise elements can overlap each other. example:

col-xs-12 col-md-4 column 

see bootply


Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -