When creating an ordinary Grid in bootstrap with 3 rows as the following, the grid is always positioned towards the left of the page,
I've tried centering the entire grid towards the center with the help of text-align:center and also tried using css classes center-block and text-center
But the grid only barely moves towards the center area.
Any suggestions on how i can get this to work?
Also i require Precise centering not using offsets in bootstrap
<div class="container">
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
Here's how to get precise centering without using the offset classes: Fiddle Demo
Create a new helper class called col-centered:
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
Any column you use this class on (ex. class="col-md-7 col-centered") will be centered directly in the middle of its container.
Then, add another set columns around your three column grid:
<div class="container">
<div class="row">
<!-- New set of columns, centered -->
<div class="col-sm-7 col-centered">
<!-- New row -->
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
</div>
</div>
</div>
Make sure to use col-xs-4 rather than col-xs-1 to create the three columns so that it spans all twelve of the Bootstrap grid columns.
You need to use offset to center your columns like this:
<div class="container">
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
Here's a jsfiddle: https://jsfiddle.net/AndrewL32/e0d8my79/12/
The bootstrap grid has 12 columns. If you want 3 equal 'columns', they each have to be 12/3 = 4 'gridcolumns' wide.
You're html will then look like this:
<div class="row">
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
</div>
The problem is that you are only using 3 out of 12 possible columns in Bootstrap. The columns, by default, run from left to right. A full 12 columns would look like this:
<div class='container'>
<div class='row'>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
That HTML represents 12 columns, spanning the entire width of the .container. But since you are using only 3 divs, each 1 column in size, all 3 columns are on the left side of the .container.
If you want 3 columns that span the entire size of the .container do this:
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
If you want 3, single-column divs that are centered in the .container it's a bit more complicated since the result of 12-3 = 9 is not divisible by 2. Since it's not divisible by 2 you can't have equal size space on the left and right side of the 3 columns. In order to get around this problem you need to do a nested (sub)grid similar to this:
<div class="col-xs-4 col-xs-offset-4">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
This is essentially a 3 column within another grid.
That will create 3 divs, but the first will be offset (or pushed) to the right 4 columns, which will make all 3 columns appeared to be centered in the layout
You need wrapper. Try with <div class="container">Your code here</div>
EDIT
The question was edited after that comment.
Related
https://prnt.sc/sa63wm
You can see on the screenshot
How can i fill the empty place with div elements? I tried display:inline-block or the other display things. They didnt work.
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-9">
</div>
</div>
Bootstrap’s grid has excatly 12 column units. Whenever you exceed 12, it will wrap it in a new row. It works, but you should exceed 12 columns in one row.
So instead of doing it above, you should go with:
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
</div>
<div class="row">
... next columns
If you want to have them all in row, you should probably use only one row and then put your other content vertically, as your first column is very tall.
Most grid layout examples in Bootstrap 4 put columns inside rows. Is it wrong to put rows inside columns ? Like this,
<div class="col col-md-6">
<div class="row">
</div>
</div>
Yes, it's totally valid to use nested columns/row. Just be sure to always use a column inside a row. Else you'll get unexpected layouts.
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<!-- Your content goes here -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It's a perfectly valid approach. Consider the example below:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
</div>
The [x]-col-[y] classes are all percentage based for widths. Go nuts with the nesting! Just make sure you wrap them in a row div else you'll get some funky margins
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.
I'm looking for the optimal method of centering a group of responsive bootstrap columns inside a row.
<li class="row hazRow">
//center this to the middle of the row
<div class="col-xs-3">
<img class="icon" href="#" title="icon" src="img/table/icon.svg">
</div>
<div class="col-xs-4">
<p>Title</p>
</div>
//end center
</li>
I was thinking of using just blank col either side, but feels like a waste and would not be able to center odd column(s) widths like 7.
I also tried wrapping the columns in a div with class of .center-block and .text-center, but this did not change the positions.
Should I abandon responsive bootstrap grids for this?
How can I center these columns?
You can accomplish this by borrowing slightly from Foundation
As others have suggested the first step is to nest your columns in an 'outer' column:
<div class="row">
<div class="col-xs-7 centered">
<div class="row hazRow">
<div class="col-xs-5">
icon.svg
</div>
<div class="col-xs-7">
<p>Title</p>
</div>
</div>
</div>
</div>
(Notice the outer column has your desired width of 7 and the inners now add up to 12)
Then add css to stop the outer column from floating and center it:
.centered {
float:none;
margin:0 auto;
}
jsfiddle example
This is where we use nested row and col classes...
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
</div>
</div>
For odd columns: (if you need 9 colums)
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-4 col-md-offset-1"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
This will give you an approx 9 column width.
Try this...
<div class="col-xs-6 text-right">
<img class="icon" href="#" title="icon" src="img/table/icon.svg">
</div>
<div class="col-xs-6 text-left">
<p>Title</p>
</div>
I have a two columns one column is size 9 and other column is size 3. I have a Google Map inside col-3 but my map is at the bottom of the screen. How do I get it to move up?
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
<div class="col-sm-3">
content...
</div>
<div>
</div>
</div>
You have your col-sm-3 nested within your col-sm-9
Try this:
<div class="container">
<div class="row">
<div class="col-sm-9">
content....
</div>
<div class="col-sm-3">
content...
</div>
</div>
</div>
If I understand your question correctly, you want the divs stacked with the 3-column div on top. If so, do it like this:
<div class="container">
<div class="row">
<div class="col-sm-9 col-sm-pull-3">
content....
</div>
<div class="col-sm-3 col-sm-pull-9">
content...
</div>
</div>
</div>