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>
Related
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
This question already has answers here:
Equal width flex items even after they wrap
(2 answers)
Closed 4 years ago.
I have a basic Bootstrap 4 grid like this one:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
Columns are correctly stretching and filling out the row width, but on some viewports last column is sent to next row (since it doesn't fit) and somehow stretching too much (and taking full width of row).
How can I prevent this from happening?
Use flex-nowrap on the row...
<div class="container">
<div class="row flex-nowrap">
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
<div class="col">
some content
</div>
</div>
</div>
https://www.codeply.com/go/w8H4wPL8Vj
Columns inside a row can be styled using bootstrap class col-xs-* so that all your columns fit into the same row instead of going to the next row.
For example,
<div class="container">
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
</div>
You can use the bootstrap breakpoints in col by add extra few classes such as:
col-lg-x where x is a given number in the 12 grid system provided by bootstrap, for example you want all seven column to be on one row on large screens, and it should breakdown to two on each row on mobile screen, you simply add a class col-xs-x where x is a given number from 1 to 12, by giving it col-xs-6 col-md-3 col-lg-1 where xs represents small and extra small devices, md represents medium devices and lg represents large screen devices.
You're simply translating that on xs devices it should be two on a row and on md devices it should be four on a row and lg devices should be that seven column on a row.
Link to understand more http://getbootstrap.com/docs/4.1/layout/grid/
I'm trying to show two types of content in the same row. I'm using Bootstrap 4.0.
I'm dividing the row into two columns: the first one should have three card columns in wide monitors, and the rest should be occupied by the second column of content.
I started with:
<main role="main" class="container-fluid">
...
<div class="row">
<div class="col col-9">
<div class="card-columns">
[this stuff is inside a php foreach() loop]
<div class="card">
<div class="card-header">Título del artículo</div>
<div class="card-body">
[content]
</div>
[end foreach]
</div>
</div>
<div class="col col-3">
[content]
</div>
</div>
</main>
But firefox showed me the three columns of card-columns, and the last column at the bottom.
So I then tried:
<div class="row">
<div class="col">
<div class="card-columns">
[content]
</div>
</div>
<div class="col col-3">
[content]
</div>
</div>
And now firefox shows me the expected result, but not Chrome.
I should add that I always have the same wrong result in Chrome.
I do attach a picture of what I mean.
What am I doing wrong? Thanks!
I've been reading about the push and pull classes in bootstrap, and need to use them, but I'm having some issues. It seems that the default behavior is to rearrange the columns when pushing/pulling.
Example here shows that the on mobile, Column A displays first, but on desktop, Column B displays first. How can I change this so that Column A displays first on both mobile and desktop? I have a logo in what should be the left/top column, and paragraphs in the right/bottom column.
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<div class="content">
<h1>Column A</h1>
</div>
</div>
<div class="col-sm-6 col-sm-pull-6">
<div class="content">
<h1>Column B</h1>
</div>
</div>
</div>
</div>
You don't need to use push/pull to make column A appear first. Remove the push/pull and the A will appear before B, and B will wrap below on a smaller screen. The sm md lg will influence WHEN wrapping occurs.
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="content">
<h1>Column A</h1>
</div>
</div>
<div class="col-sm-6">
<div class="content">
<h1>Column B</h1>
</div>
</div>
</div>
</div>
why do you need the push and pull? if it was just
div class='col-sm-6 col-xs-12' for each div it would work as you want
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>