I have the following columns inside this row; however, I don't think they are floating correctly. Does a row need wrap every time there is 12 columns?
Is there a way to automatically flow in Materialize framework?
Thank you in advance!
<div class="row">
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
<div class="col s3">This div is 3-columns wide</div>
</div>
From their docs:
Remember when you are creating your layout that all columns must be contained inside a row...
Since their grid system uses the traditional 12-column model, this would be the max column size you would be able to fit in a single row.
Related
How would I collapse a Bulma column, like for a collapsible sidebar?
e.g.
<div class="columns">
<div class="column" id="sidebar is-2">
<div class="column" id="centre is-8">
<div class="column" id="right is-2">
</div>
So that the left hand column closes up to is-0 and the remaining columns expland to take up the remaining space?
Basically, I have a bootstrap container and 2 rows in it, one being the header and the other the content. I would like to have the container to have the height of the viewport so that the content is scrollable.
<div class="container-fluid overflow-hidden h-100">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
</div>
.content-area {
max-height: 100%;
overflow-y: auto;
}
The max-height renders the content full height of the parent which is the container so a part of the content is chopped off the view. I would like the content to fill the rest of the container's height.
I tried flex-grow-1 from bootstrap instead of the css height but no luck.
Make the container vh-100 d-flex flex-column and then add flex-grow-1 to the row.
<div class="container-fluid overflow-hidden vh-100 d-flex flex-column">
<div class="row">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area bg-info flex-grow-1">
<div class="col">
<h1>Content blah... </h1>
...
</div>
</div>
</div>
Demo: https://codeply.com/p/7u2lXo0jyG
Related: Bootstrap 4 row fill remaining height
Add vh-100 class on the first row. It will make the viewport height, 100%.
<div class="container-fluid overflow-hidden h-100">
<div class="row vh-100">
<div class="col">
<h1>Header</h1>
</div>
</div>
<div class="row content-area">
<div class="col">
<div>Content blah...</div>
</div>
</div>
Source: https://getbootstrap.com/docs/4.4/utilities/sizing/
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 the latest bootstrap. I have three bootstrap col-sm grid columns. In every column there are bootstrap cards. When I delete all cards in a certain column I want to resize its width to 20px. I have tried to use CSS but the column did not resize. Is there a solution?
One more thing - when the column is resized will the other columns resize correspondingly to fill the empty space?
#import "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css";
<div class="container">
<div class="row">
<div class="col-sm">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col-sm">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
</div>
<div class="col-sm">
This column should resize when it's empty.
</div>
</div>
</div>
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