I have more than 12 columns in the row which makes the columns stack vertically, but the top ones have different size compared to bottom ones.
<div class="container-fluid">
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
</div>
I am trying to have responsive (allow grow) columns but all columns should carry same width.
You can try insert a col-md-4 with no content or insert only 2 col-md-4 on a row, See if this help you. Look at full screen. (Modified the answer with the help of the comments)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
</div>
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4" id="last-column">
</div>
</div>
</div>
You don't need custom CSS for this. You should use the already defined responsive bootstrap classes for displaying. Also another .row is not needed but could be useful for another row.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
1
</div>
<div class="col-md-4">
2
</div>
<div class="col-md-4">
3
</div>
<div class="col-md-4">
4
</div>
<div class="col-md-4">
5
</div>
<div class="col-md-4 d-none d-lg-block">
6
</div>
</div>
</div>
Related
how to do something like that with bootstrap?
img cuz I do not know how to describe it
You can use Bootstrap grid to achieve this
<div class="row">
<div class="col-6">div-1</div>
<div class="col-6">
<div class="row">
<div class="col-12">div-2</div>
<div class="col-12">div-3</div>
</div>
</div>
</div>
You can try something like this:
<div class="container">
<div class="row">
<div class="col">
div 1
</div>
<div class="col">
<div class="row">
<div class="col">
div 2
</div>
</div>
<div class="row">
<div class="col">
div 3
</div>
</div>
</div>
</div>
</div>
How to merge 2 rows and 2 columns to become 1 big box in Bootstrap 4?
Before:
To be like this:
HTML
<div class="container">
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
<div class="col-3">.col-3</div>
</div>
</div>
I have made some changes to your html structure, also used some b-4 classes (h-100) to align it. read boostrap-4 document to understand grid system.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
<div class="w-100"></div>
<div class="col border">.col-3</div>
<div class="col border">.col-3</div>
</div>
</div>
<div class="col">
<div class="row h-100">
<div class="col border h-100">.col-3</div>
</div>
</div>
</div>
</div>
Hope this helps. Note i did not add background colors or classes to keep the answer clean
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">A</div>
<div class="col-sm-6">B</div>
</div>
<div class="row">
<div class="col-sm-6">C</div>
<div class="col-sm-6">D</div>
</div>
</div>
<div class="col-sm-6">
F
</div>
</div>
JSFIDDLE LINK
I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>
You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>
You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>
Actually I don't know how to describe the issue. I have designed a model, in which I have specify some elements in class row. But after 3 elements it leaves unnecessary spaces. Is there any issue with bootstrap class row?.Checkout the link. Click on register
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-sm-4 standard">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 school_name">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 occupation">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 father_income">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 blood_group">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 type_of_wastage">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 photo">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 edit_photo" style="display: none;">
<div class="form-group">
</div>
</div>
<div class="col-sm-4 city">
<div class="form-group">
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-4 address">
<div class="form-group">
</div>
</div>
</div>
The Bootstrap grid syntax is wrong. A row in Bootstrap contains 12 columns. If you have already 12 columns in a row, you must open a new row. In your case, you must open a new row after you used the col-sm-4 class 3 times. So it must look like this:
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
set some min-height to all columns in register
.modal-body .col-sm-4 {
min-height: 86px;
}
You can't put all these columns in one row. with col-sm-4, you can have only 3 columns per row. after that, you need to create another row. Because in bootstrap grid system there are 12 columns per row. If you need all hose in one row, you have to use col-sm-1. But I don't think it would be a good idea. Better thing is, since you have 10 elements here, either use col-sm-4 in 4 rows or col-sm-3 in 3 rows.
You have write wrong syntax.One row in Bootstrap contains 12 blocks only. That's why unnecessary space is being shown.
This question already has answers here:
Bootstrap: how to stack divs of different heights?
(4 answers)
Closed 6 years ago.
How I can manage the orders of divs?
What I've now:
What I need:
Code:
<div class="row">
<div class="col-lg-4 bg-info">
test <br><br><br><br><br>
</div>
<div class="col-lg-4 bg-info">
1
</div>
<div class="col-lg-4 bg-info">
2
</div>
<div class="col-lg-4 bg-info">
test </br></br></br></br></br>
</div>
<div class="col-lg-4 bg-info">
4
</div>
</div>
If it must be done without any change in current HTML, you can add Bootstrap's class pull-right to the right blocks.
Your code structure should be:
<div class="container">
<div class="row">
<div class="col-xs-6">test</div>
<div class="col-xs-6 pull-right">1</div>
<div class="col-xs-6 pull-right">2</div>
<div class="col-xs-6 pull-right">test</div>
<div class="col-xs-6">4</div>
</div>
</div>
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.bg-info {
margin-bottom: 10px;
}
<div class="container">
<div class="row">
<div class="col-xs-6 bg-info">
test <br><br><br><br><br>
</div>
<div class="col-xs-6 pull-right bg-info">
1
</div>
<div class="col-xs-6 pull-right bg-info">
2
</div>
<div class="col-xs-6 pull-right bg-info">
test <br><br><br><br><br>
</div>
<div class="col-xs-6 bg-info">
4
</div>
</div>
</div>
Every row has 12 units of space. so you can use nested divs to achieve the ovjective
<div class="col-md-4">
<div class="col-md-12">
//first box first column
</div>
<div class="col-md-12">
//second box first column
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
//first box second column
</div>
<div class="col-md-12">
//second box second column
</div>
<div class="col-md-12">
//third box second column
</div>
</div>
You can easily change the order of grid columns with .col-md-push-* and .col-md-pull-* modifier classes. Take a look here for more info.