<div class="row row-cols-auto">
<div id="vid_0"></div>
<div id="vid_1"></div>
<div id="vid_2"></div>
<div id="vid_3"></div>
<div id="vid_4"></div>
<div id="vid_5"></div>
</div>
How do I make it so there is a maximum of 3 columns with auto columns?
Each div is a card with the class: col
I am using bootstrap
You can't have it both ways. You'd use row-cols-3 instead of row-cols-auto.
See https://getbootstrap.com/docs/5.2/layout/grid/#row-columns.
I'm using bootstrap 4.4.1.
I've been loking for a responsive list group that will be same height with other components. In the image I want both columns on second row to be same height of image and to hide other list items behind an scrolling group.
Here is the html file : https://jsbin.com/jaqacoq/edit?html,output
<div class="col-md-8 my-col p-4">
<img class="img-fluid" src="img3.jpg" alt="Image not Found">
</div>
<div class="col-md-4 p-2 my-col">
<div class="container">
<div class="row my-row">
<div class="col my-container">
Col 1
</div>
<div class="col my-col">
Col 2
</div>
</div>
<div class="row my-row">
<div class="col">
<div class="overflow-auto">
<div class="">Item 1</div>
<div class="">Item 1</div>
<div class="">...</div>
</div>
</div>
</div>
</div>
</div>
Expected result, but without using fixed size :
What you need here is a bit of jQuery to calculate the height of your image so you can set the height of your list group based on that.
With jQuery you can calculate height with .height()
Here's an example on how to use it:
$('#div2').css('height', $('#div1').height()+'px');
And here's an example with your code that is working:
https://www.codeply.com/p/Pv1dwtjQ9E
Y-overflow don't work without either height or max-height option, so you should specify height of your .comments-block in any units besides percents.
Another approach I can think of: position: fixed all your interface elements and resize/scroll only the central element.
So basically I'm still a begginer when it comes to doing interfaces on the web and trying to allign everything properly. I've decided to use the bootstrap library. I'm trying to make a modal dialog divided into multiple section but i'm really struggling to make some section stack on top of each other and have another section take up the entire space.
What I currently have :
https://i.gyazo.com/adeeb3cca0abb6dea4a5d002d3568afa.png
What I'm trying to achieve :
https://i.gyazo.com/e8513c243424cb71926ac838e8b1166e.png
This is the code I currently have with some sample text to try to delimiter each section :
<div class='container-fluid'>
<div class="row">
<div class="col-md-3" style='border:1px solid black;max-height:5vh;'>
STATUS
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>
L
</div>
<div class="col-md-3">
SOME TEXT ASDASDASDJLASDJKLASDJAD
ASDASDLASKD
aASDASDK:ASDKASDK
ASDASJDASDASDKASJDASDJ
</div>
<div class="col-md-9">
L
</div>
</div>
</div>
To match the image you've provided, you want two columns - one three wide with four rows, and one nine wide with one row.
The height of the rows in the left column will be determined by their contents. I've written an example with extra content in one row in the left column:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">
3
</div>
<div class="row">
3<br>
wide<br>
but<br>
taller
</div>
<div class="row">
3
</div>
<div class="row">
3
</div>
</div>
<div class="col-sm-9">
9
</div>
</div>
</div>
JSFiddle for a live example.
You keep two main columns (3/9) and inside the first column you can add more container. You can also add styles or classes to them.
<div class="container-fluid">
<div class="row" >
<div class="col-md-3" style='border:1px solid black;min-height:50vh;'>
<div style="min-height:10vh">10vh</div>
<div style="min-height:20vh">10vh</div>
<div style="min-height:10vh">10vh</div>
<div style="min-height:10vh">10vh</div>
</div>
<div class="col-md-9" style='border:1px solid black;min-height:50vh;'>L</div>
</div>
</div>
I am designing a stair grid for showing the growth of a child in 4 up steps.
What I did is: created four rows containing 4 columns. From the first div, I removed the first three column and put content in fourth. Similarly, on next bottom div I put content in the third column then in next bottom filled the second column.
After all these, I put top margin negative so that it looks like a stair.
I know this is not a good approach. How can I improve that?
I want it to be like this:
Current code:
<!--Here i have used the last column and col-md-9 remains blank-->
<!-- First row -->
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3 ml-md-auto bg-alert">
<img src="img/career/info2/4.png" class="img-responsive">
</div>
</div>
<!--Here i have used the second last column and col-md-6 remains blank-->
<!-- secondrow -->
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-3" style="margin-top:-14rem;">
<img src="img/career/info2/3.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
</div>
<!--Here i have used second column and remains blank-->
<!-- Third row -->
<div class="row">
<div class="col-md-3 ml-md-auto"></div>
<div class="col-md-3 ml-md-auto" style="margin-top:-37rem;">
<img src="img/career/info2/2.png" class="img-responsive">
</div>
<div class="col-md-3"></div>
<div class="col-md-3 ml-md-auto"></div>
</div>
<!--Here i have used the first column and col-md-9 remains blank-->
<!-- Fourth row -->
<div class="row">
<div class="col-md-3">
<img src="img/career/info2/1.png" class="img-responsive">
</div>
<div class="col-md-9"></div>
</div>
Here's one way to solve this problem:
You put 4 columns into one single .row and then add 3 custom classes to the first 3 columns (.step-1 / .step-2 / .step-3).
Using #media (min-width: 768px) you ensure that those custom classes only kick in on medium (md) screens or larger. Then you add margin-top to each column as needed to push it down.
On screens that are smaller than md the 4 columns will stack up in the right order without any top margins affecting them.
Click the "run code snippet" button below and expand to full page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
#media (min-width: 768px) {
.step-1 {
margin-top: 150px;
}
.step-2 {
margin-top: 100px;
}
.step-3 {
margin-top: 50px;
}
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 step-1">Step 1</div>
<div class="col-md-3 step-2">Step 2</div>
<div class="col-md-3 step-3">Step 3</div>
<div class="col-md-3">Step 4</div>
</div>
</div>
I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code:
<div class="row">
<div class="text-center col-md-6">
Widget 1
</div>
<div class="text-center col-md-6">
Widget 2
</div>
</div>
I want to add margin: 10px and padding:10px. Some people suggest to change their classes to col-md-5 with pull-left and pull-right, but the gap between them will be too large.
Simply add a div within col-md-6 that has the extra padding that you need. The col-md-6 is the 'backbone' to keep the column integrity, but you can add additional padding within it.
<div class="row">
<div class="text-center col-md-6">
<div class="classWithPad">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="classWithPad">Widget 2</div>
</div>
</div>
CSS
.classWithPad { margin:10px; padding:10px; }
Bootstrap 5 (Update 2021)
Bootstrap 5 has still includes spacing utilities for padding. However, because of new RTL support "left" and "right" have been changed to "start" and "end". For example pl-2 is now ps-2.
pl-* => ps-* (padding-left)
pr-* => pe-* (padding-right)
ml-* => ms-* (margin-left)
mr-* => me-* (margin-right)
Additionally, Bootstrap 5 introduces new grid gutter classes that can be used to adjust the spacing between columns. The guttter is set on the row instead of each col-* inside the row. For example, use g-0 for no spacing between columns.
Bootstrap 5 column spacing demo
Bootstrap 4 (Update 2018)
Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.
<div class="row">
<div class="text-center col-md-6">
<div class="mr-2">Widget 1</div>
</div>
<div class="text-center col-md-6">
<div class="ml-2">Widget 2</div>
</div>
</div>
You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...
Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...
Bootstrap 4 Column Spacing Demo
Notes
Changing the left/right margin(s) on col-* will break the grid.
Change the left/right margin(s) on the content of col-* works.
Change the left/right padding on the col-* also works.
I was facing the same issue; and the following worked well for me. Hope this helps someone landing here:
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Set room heater temperature
</div>
</div>
</div>
This will automatically render some space between the 2 divs.
Just add 'justify-content-around' class. that would automatically add gap between 2 divs.
Documentation:
https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment
Sample:
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
You may use the padding and margin shorthand Bootstrap 4 classes as follows:
For extra small devices i.e. xs
{property}{sides}-{size}
For other devices/viewports (small, medium, large and extra large)
{property}{sides}-{breakpoint}-{size}
Where:
property = m for margin and p for padding
Following are sides shorthand meanings:
l = defines the left-margin or left-padding
r = defines the right-margin or right-padding
t = defines the top-margin or top-padding
b = defines the bottom-margin or right-padding
x = For setting left and right padding and margins by the single call
y = For setting top and bottom margins
blank = margin and padding for all sides
The breakpoint = sm, md, lg, and xl.
Combining all the above, the left padding complete code can be (for example):
For left padding in extra small devices
pl-2
or for medium to extra large
pl-md-2
Try This:
<div class="row">
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 1
</div>
</div>
<div class="text-center col-md-6">
<div class="col-md-12">
Widget 2
</div>
</div>
</div>
I would keep an extra column in the middle for larger displays and reset to default when the columns collapse on smaller displays. Something like this:
<div class="row">
<div class="text-center col-md-5 col-sm-6">
Widget 1
</div>
<div class="col-md-2">
<!-- Gap between columns -->
</div>
<div class="text-center col-md-5 col-sm-6">
Widget 2
</div>
</div>
Super easy with flexbox. Leave room for some space by changing the columns to col-md-5
<div class="row widgets">
<div class="text-center col-md-5">
Widget 1
</div>
<div class="text-center col-md-5">
Widget 2
</div>
</div>
CSS
.widgets {
display: flex;
justify-content: space-around;
}
For those looking to control the space between a dynamic number of columns, try:
<div class="row no-gutters">
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<div class="col">
<div class="inner">
<!-- content here -->
</div>
</div>
<!-- etc. -->
</div>
CSS:
.col:not(:last-child) .inner {
margin: 2px; // Or whatever you want your spacing to be
}
A solution for someone like me when cells got background color
HTML
<div class="row">
<div class="col-6 cssBox">
a<br />ba<br />ba<br />b
</div>
<div class="col-6 cssBox">
a<br />b
</div>
</div>
CSS
.cssBox {
background-color: red;
margin: 0 10px;
flex-basis: calc(50% - 20px);
}
In the otherside if you like to remove double padding between columns just add class "nogap" inside row
<div class="row nogap">
<div class="text-center col-md-6">Widget 1</div>
<div class="text-center col-md-6">Widget 2</div>
</div>
and create additional css class for it
.nogap > .col{ padding-left:7.5px; padding-right: 7.5px}
.nogap > .col:first-child{ padding-left: 15px; }
.nogap > .col:last-child{ padding-right: 15px; }
Thats it, check here: https://codepen.io/michal-lukasik/pen/xXvoYJ
I had the same issue and worked it out by nesting a div inside bootstrap col and adding padding to it. Something like:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
<div class="col-md-4">
<div class="custom-box">Your content with padding</div>
</div>
</div>
</div>
I have just found a solution that works for me, although it doesnt actually create a space between the boxes so may not be exactly what you are looking for.
border border-white
Doesn't actually create a space but gives the effect of space between cols. Only works if you have a bg-color obviously.
Try this:
<div class="row">
<div class="col-md-5">
Set room heater temperature
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
Set room heater temperature
</div>
</div>
For the more curious, I have also found that adding
border: 5px solid white
or any other variant of your liking, to make it blend in, works superbly.