I have a question regarding a bootstrap grid system I am trying to achieve - and have not been successful so far.
I am trying to do the following grid system:
I have tried a code that you'll find with this JSFiddle.
<div class="container mt-5">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12 border bg-light">
<h3>Bloc 2</h3>
</div>
<div class="col-lg-6 col-md-12 bg-danger">
<h3>Bloc 3</h3>
</div>
</div>
</div>
It works well for xs and md system. However, I have issues with the lg version, where I don't find a way to stack the bloc number 2 (grey) on top of the bloc number 3 (red). Is there a way to change the place of such a column? As indicated on the figure above, the bloc number 1 should fall to the bottom of the page.
Thanks a lot for your help!
Basically, you have to wrap a div for a second column around the gray and red divs
<div class="container ">
<div class="row">
<div class="col-lg-6 col-md-6 col-12 border bg-primary" style="height: 200px">
<h3>Bloc 1</h3>
</div>
<div class="col-lg-6 col-md-6 col-12"><!--NEW DIV, moved column info here-->
<div class=" border bg-light">
<h3>Bloc 2</h3>
</div>
<div class=" bg-danger">
<h3>Bloc 3</h3>
</div>
</div><!--new div end-->
</div>
</div>
You will need to work out the tweaks for spacing, but this is a start
Related
I am trying to use two column divisions in same line.
Check my code:
<div class="col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Left Div
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
Right Div
</div>
</div>
</div>
this structure responsive for till 574px. but when i reduce browser size after 574px, divisions show in two rows. but my requirement show it in same line (left & Right)
please check above image. that the issue.
You can set same divided columns for every screen using col class
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col bg-success">
Left Div
</div>
<div class="col bg-warning">
Right Div
</div>
</div>
</div>
</div>
bg-success and bg-warning is just for color
<div class="col-12 ">
<div class="row">
<div class="col-6">
Left Div
</div>
<div class="col-6">
Right Div
</div>
</div>
This question already has answers here:
Empty vertical space between columns in Bootstrap 4
(2 answers)
Closed 3 years ago.
I'm having trouble stacking my columns correctly using bootstrap - as you can see from the image I need the black box positioned below green box but I can't get this to work:
Here is the code I am using:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
<div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
</div>
</div>
Can someone please tell me where I am going wrong here?
Thanks
You have 2 columns and you put first div into 1 column and second inside the 2 one and next div will go angain inside the 1 column, the easier way to place black div below the green is to create another blank div
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 " style="background-color:green; height:300px;"></div>
<div class="col-lg-6 col-md-12" style="height:300px;"></div>
<div class="col-lg-6 col-md-12" style="background-color:black; height:300px;"></div>
</div>
</div>
Bootstrap 4 is mobile first. So first thing is invert the order of your classes.
The problem is that you are setting the width of your boxes to be the half of the width of the row on desktop, and rows are set to wrap by default in bootstrap.
Set the columns to full width with col-12.
<div class="container-fluid">
<div class="row">
<div class="col-12" style="background-color:blue; height:600px;"></div>
<div class="col-12 " style="background-color:green; height:300px;"></div>
<div class="col-12" style="background-color:black; height:300px;"></div>
</div>
</div>
EDIT:
If you want the columns to be half of the width of the row and still prevent wrapping, you have to add an offset:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:blue; height:600px;"></div>
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:green; height:300px;"></div>
<div class="col-12 col-lg-6 offset-lg-3" style="background-color:black; height:300px;"></div>
</div>
</div>
You can nest the blue and green column in another column.
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-12" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 ">
<div style="background-color:green; height:300px;"></div>
<div style="background-color:black; height:300px;"></div>
</div>
</div>
This way the green and black column are contained inside the "right" side. The other answers are working too but they are changing the bootstrap grid behaviour or splitting up the content, which I don't think is ideal.
Bootstrap 4 uses Flexbox so columns aren't going to "float" next to each other as they did in Bootstrap 3. You can override this behavior by enabling floats on lg and up screen widths.
Notice use of the d-lg-block and float-left classes.
<div class="container-fluid">
<div class="row d-lg-block">
<div class="col-lg-6 col-md-12 float-left" style="background-color:blue; height:600px;"></div>
<div class="col-lg-6 col-md-12 float-left" style="background-color:green; height:300px;"></div>
<div class="col-lg-6 col-md-12 float-left" style="background-color:black; height:300px;"></div>
</div>
</div>
https://www.codeply.com/go/7KLlzbAGGU
Also see: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
I'm trying to create a full screen layout that takes up 100% of the viewport with a sticky header and footer, and individually scrollable columns in the main content area.
I've experimented with using .h-100 and .flex-grow-1 on various rows and columns but I can't quite get it to work. The closest I've come is to add h-100 to the container and the middle row, but that pushes the footer off the bottom of the screen.
<body>
<div class="container-fluid h-100">
<div class="row">
<div class="col-12 border">Navbar </div>
</div>
<div class="row">
<div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
<div class="col-4 border" style="overflow-y: scroll;">Article list </div>
<div class="col-6 border" style="overflow-y: scroll;">Article content </div>
</div>
<div class="row">
<div class="col-12 border">Footer </div>
</div>
</div>
</body>
I can get it to work with just a single column, but adding more than 1 column breaks the layout in a way I don't understand.
Make the container d-flex and then use flex-grow-1 to make the content area fill the height. You'll also want to use flex-shrink-0 on the Navbar and Footer so they don't "squish" in height.
<div class="container-fluid h-100 d-flex flex-column">
<div class="row flex-shrink-0">
<div class="col-12 border">Navbar </div>
</div>
<div class="row flex-grow-1">
<div class="col-2 border" style="overflow-y: scroll;">Sidebar </div>
<div class="col-4 border" style="overflow-y: scroll;">
Article list
</div>
<div class="col-6 border" style="overflow-y: scroll;">Article content </div>
</div>
<div class="row flex-shrink-0">
<div class="col-12 border">Footer </div>
</div>
</div>
Demo: https://www.codeply.com/go/ouc3hddx5i
Related:
Use remaining vertical space with Bootstrap 4
Bootstrap 4.0 - responsive header with image + navbar + full-height body
I'm using bootstrap 4 and trying to create a layout. The problem I'm having is with the responsive.
When the page size gets smaller I want the right-nav to go under the left-nav. The problem I run into is when the main body runs longer than the left nav. The right nave always goes under the main body, is there a way to force it under the left-nav without the space in between?
<div class="container-fluid">
<div class="row pt-5 pl-3 pr-3">
<div id="left-nav" class="d-none d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2">
...
</div>
<div id="main-body" class="col-12 col-sm-12 col-md-8 col-lg-9 col-xl-8">
...
</div>
<div id="right-nav" class="d-none d-sm-none d-md-block col-md-3 col-lg-3 col-xl-2">
...
</div>
</div>
<section id="footer" class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
</div>
Since Bootstrap 4 uses flexbox, cols across a row are always going to be the equal height (set by the height of the tallest).
You can workaround this by "disabling" flexbox at certain breakpoints using d-(breakpoint)-block on the row. By making the row display:block instead display:flex, floats can now be used to float cols to the right or left.
<div class="container-fluid">
<div class="row pt-5 d-md-block d-xl-flex">
<div id="left-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border float-left">
left
</div>
<div id="main-body" class="col-md-8 col-lg-9 col-xl-8 border taller float-right">
main
</div>
<div id="right-nav" class="d-sm-none d-md-block col-md-4 col-lg-3 col-xl-2 border">
right
</div>
</div>
</div>
Demo: https://www.codeply.com/go/A0oYUlPOud
Related:
How to fix unexpected column order in bootstrap 4?
How to make this column ignore the vertical space
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>