Bootstrap Grid Columnd Fit content - html

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.

Related

How to set a max amount of columns on row-cols-auto in bootstrap?

<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.

card box across full screen width - bootstrap

How can I adjust my 'card' so that it is displayed across the entire width of the screen?
I am using bootstrap
<div class="card">
<h4 style="margin-top: 5px; width: 100%;">{{$tipo->tipo }}</h4>
</div>
i need width similar to footer

If you are using the latest Bootstrap 4 then this code will create a card across the entire width:
<div class="card w-100 mt-2">
<h4>Restaurante</h4>
</div>
If there is still a gap then it is likely you have padding on the container div surrounding the card, so you would need to remove that.

the first thing you need to notice it's that card class display is flex in bootstrap.Also card-body has a 20px padding.So the first thing you need is use p-0 in card-body then devide your card body to multi row.So you below code:
<div class='card'>
<div class='card-img-top'>
<img src='...' />
</div>
<div class='card-body p-0'>
<div class='row mx-0'>
<div class='col-12 p-2'>
...card content
</div>
</div>
<div class='d-block px-0'>
<h4>Your footer</h4>
</div>
</div>
</div>
if you put a clear image to view what you want,I will help you more.I hope I could help you.

Boostrap mix with grid to equal height of row inside .col

I want to set my code to auto-calculate equal height in inside of .col, because for example inside .col I have <h2> and <p> which could have different number of rows, so height of this element will be different for every .col, I would like to get same height for all rows inside .col.
I tried to use flexbox utilities, but I didn't find a solution, so I am wondering if grid will help me get what I want to get, but I don't know if display: grid inherits height of flexbox elements?
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Projektowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/projektowanie-stron.jpg" class="img-fluid" alt="Projektowanie stron">
</div>
<p>Projektowanie oraz tworzenie serwisów internetowych.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Pozycjonowanie <b>stron</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/pozycjonowanie-stron.jpg" class="img-fluid" alt="Pozycjonowanie stron">
</div>
<p>Zwiększ pozycję swojej strony www w wynikach wyszukiwania.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
<div class="col-md-4">
<div class="header-bottom-box">
<h2>Outsourcing <b>IT</b></h2>
<div class="img-container">
<img src="http://irson.linuxpl.eu/images/outsourcing-it.jpg" class="img-fluid" alt="Outsourcing IT">
</div>
<p>Outsourcing informatyczny Profesjonalna opieka informatyczna dla firm.</p>
<div class="text-right">
więcej
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/jRweow
I thought about using display: grid to .header-bottom-box and equal height of inside element.
EDIT
I tried to use GIRD:
And it works like I want to, but I don't know why I get this white space, how to delete it?

this is normal sir,
this all happen because of last col. text is less then first and second.

How to remove space on right side of div?

I created a column structure with bootstrap 4 . It looks something like this it has 1 row with 2 columns:
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-5 top">
</div>
<div class="col-lg-5 top">
/*Widget with too much margin right*/
</div>
</div>
</div>
</div>
The issue is that the widget on the right has too much empty space. The columns have an equal length (col-lg-5) but there is still a lot of space on the right. How can I remove this and keep the columns the same size?
link to codepen

You should only use columns within your rows, and the columns are based on a 12 column grid. You currently have 10 columns worth of width taken up using 2 .col-5 column and you also have a pixel for the divider that is stuck into the row in the codepen even though your example here doesn't show it.
How about doing two .col-6 columns and having the divider be a left border on the right column?
https://codepen.io/anon/pen/xaeWGB
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-6 top">
</div>
<div class="col-lg-6 divider top">
</div>
</div>
</div>
</div>

Bootstrap: add margin/padding space between columns

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.