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
Related
I have 6 items to display...
On a cell phone (xs) I want two rows of three items to display and on bigger than cell phone size, I'd like to see all six on the same row.
I tried...
<div class='row'>
<div class='col-xs-4 col-sm-2'>1</div>
<div class='col-xs-4 col-sm-2'>2</div>
<div class='col-xs-4 col-sm-2'>3</div>
<div class='col-xs-4 col-sm-2'>4</div>
<div class='col-xs-4 col-sm-2'>5</div>
<div class='col-xs-4 col-sm-2'>6</div>
</div>
This displays fine on a large screen with all 6 items but when viewing in the xs screen (phone) it just shows 6 separate rows.
I want to see
1 2 3 4 5 6
on large screen and
1 2 3
4 5 6
on xs screens.
Any ideas? Thanks
col-xs- was for Bootstrap-3. For Bootstrap-4, for the smallest screen, use col-4, so your code would look like:
<div class='row'>
<div class='col-4 col-sm-2'>1</div>
<div class='col-4 col-sm-2'>2</div>
<div class='col-4 col-sm-2'>3</div>
<div class='col-4 col-sm-2'>4</div>
<div class='col-4 col-sm-2'>5</div>
<div class='col-4 col-sm-2'>6</div>
</div>
That should give you three columns on a smartphone and six columns on anything else.
Update for space between the elements:
If you want some spacing between your elements, you could put another column inside your first column, and then put your information in that column. The normal gutter is 15px wide, and with two gutters, the space between columns would be 30px. If that’s too wide, you can customize it as explained in this answer: https://stackoverflow.com/a/27005684/1011984
As an example, I revised my first solution to include a 5px gutter (so 10px total). I also put some spacing between the elements on a smartphone, and a block below the elements to illustrate that you can get right next to them, if you want. If you don’t, just delete the mb-n3 margin on the row.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row.gutter {
margin-left: -5px;
margin-right: -5px
}
[class*="col-"].gutter {
padding-left: 5px;
padding-right: 5px;
}
</style>
<div class="container mt-5">
<div class='row mb-n3 gutter'>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-primary">1</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-secondary">2</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-success">3</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-danger">4</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-warning">5</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-info">6</div>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-light" style="height: 200px;">
<p>A filler div to show that there can be a space between the rows of elements on a small screen, but no space below the row, if you don’t want one.</p>
</div>
use col-x instead of col-xs-x. It was depreciated on bootstrap 4.
<div class="row">
<div class="col-4 col-sm-2">1</div>
<div class="col-4 col-sm-2">2</div>
<div class="col-4 col-sm-2">3</div>
<div class="col-4 col-sm-2">4</div>
<div class="col-4 col-sm-2">5</div>
<div class="col-4 col-sm-2">6</div>
</div>
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
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 am using Bootstrap 3, and i have a text within a col and when it's longer, it does not fit the div and overflows it in the width of the box. I have used different display styles, do a lot of search but without success.
<div class="container-fluid">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 col-lg-offset-1 col-md-offset-2">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<img src="http://www.kungfunguyen.com/wp-content/uploads/2013/08/Bootstrap-2-1-Is-the-Latest-Update-to-Twitter-s-Popular-Open-Source-Project.png">
<div class="caption">
Very long text which oveflows the whole div in width.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
</div>
</div>
Example with thumbnail and caption, the same problem
http://jsfiddle.net/zqeLse5q/
Thanks
.caption{
word-wrap: break-word;
}
http://jsfiddle.net/zqeLse5q/2/
In the code below for Bootstrap 3, I am attempting to get the 3rd column to not stack. I want it to always stay top right just as the left most column stays top left. Is there a simple way? I thought about just excluding that section from bootstrap and just apply css to float right, but surely in Bootstrap, I can do this.
<header id="t3-header" class="container t3-header">
<div class="row">
<!-- LOGO -->
<div class="col-xs-12 col-md-2 logo"> I stay always top left</div>
<div class="col-xs-12 col-md-8"> I should stackunder 1st column as browser resizes </div>
<!-- I want this column to not stack below column 2 as the browser resizes. -->
<div class="col-xs-12 col-md-2">
I should always stay top right
<div class="row">
<div class="col-lg-6"> </div>
<div class="col-lg-6"> </div>
</div>
</div>
</div>
If I've understood you correctly, you've got to make the "top right" div, appear first in the cascade. To do this, first it as the first column, then you can use pull-left and pull-right helper classes to trick the first two columns:
Secondly, you could remove the col-xs-12 alike in the example:
<header id="t3-header" class="container t3-header">
<div class="row">
<div class="col-md-2 pull-right">
I should always stay top right
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
</div>
<!-- LOGO -->
<div class="col-sm-12 col-md-2 logo pull-left">
I stay always top left
</div>
<div class="col-sm-12 col-md-8 pull-left">
I should stackunder 1st column as browser resizes
</div>
</div>
</div>
Example: http://www.bootply.com/ee3E67pujY