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>
Related
i want to align col-lg-8 with col-lg-4 that contains 2 rows for 2 images, i need those 2 columns align perfectly so they fit each others height
i tried this:
desired look
and what i got
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Link to CODEPEN
While it is true that you can't depend on Bootstrap to do everything, you don't need any of the additional css "gymnastics" proposed by #derek-gutierrez because with native Bootstrap classes alone you can get done almost everything and most certainly in this particular case here.
The following code is leaner and does everything you want with native Bootstrap classes alone. No extra gymnastics needed. All with perfect paddings/gutter out of the box:
<div class="container">
<div class="row">
<div class="col-lg-8">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
<div class="col-lg-4">
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col">
<img src="Cupcakes01.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
That's the magic of the Bootstrap grid just working.
Notice: You had 2 unnecessary divs (first row and col-lg-12). I cut them out. That was totally useless fat in your code. Don't put in more code than necessary. That reduces the number of potential problems.
Try below code, I hope this is what you are looking for
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-8">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
<div class="col-lg-4">
<img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg"/>
</div>
</div>
</div>
You can't depend on bootstrap to do everything. You are going to add some of your own custom CSS to achieve the effect you want. If you are unfamiliar with css and selectors W3 schools is a good resource.
To achieve this effect add this CSS to the head of your document:
(This is simply to illustrate based off of your example, you will want to be more specific with your selectors if there is going to be more to this page)
<style>
img {
width: 100%; /* Makes imgs match the parent column/container width */
}
#top-image {
margin-bottom: 30px; /* Adds the necessary space to the bottom of the first image */
}
</style>
The columns inside the col-lg-4 should not be col-lg-2. This is basically saying these columns are 2/12ths the size of the container. Instead change them to 12 to span the full width of the container. I also added an id to the first image in this column "id="top-image" to add the necessary margin.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<img src="img/1.png" />
</div>
<div class="col-lg-4">
<div id="top-image" class="row">
<div class="col-lg-12">
<img src="img/2.png" />
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="img/3.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I want to have 2 divs besides each other for col-md and higher, while having them above each other for col-sm and lower. So I tried to use the push and pull feature as mentioned in the docs but somehow it's not working. What I'm trying to do is get the RIGHT div above the LEFT div on col-sm and lower, basically reversing the order.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
<div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/ko7euh77/1/
You just need to think "mobile-first"..
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
<div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
</div>
</div>
Demo: http://www.codeply.com/go/2SN4r7KGwV
Bootstrap 4 Update
The push pull class are now order-* (using flexbox) in Bootstrap 4.
https://www.codeply.com/go/l3BOOH6JM9
<div class="row">
<div class="col-md-5 order-md-2">
<div class="card card-body">RIGHT</div>
</div>
<div class="col-md-7 order-md-1">
<div class="card card-body">LEFT</div>
</div>
</div>
It totally depends on the version you are using, for bootstrap 4 and above you can push and pull like this:
one more thing here order doesn't mean to the grid of the scree it will be the no.
<div class="row">
<div class="col-sm-2 order-md-2 order-sm-1" >
<div >RIGHT</div>
</div>
<div class="col-sm-10 order-md-1 order-sm-2 ">
<div >LEFT</div>
</div>
</div>
Here are the bootstrap docs for further reading
What I am trying to do is to have two columns of 3 nested pink squares each, at the large and med settings, then on small screen tablet a single column with 3 pink squares then another single column with 3 pink squares under that. Then at the xs mobile level I'm trying to again have two columns but with 1 column of nested pink squares in each. I thought this is what my css is requesting, but that's not what is happening :( What am I doing wrong here?
Here's a plunker
Here's the html:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
<div ng-repeat="x in things">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
<div ng-repeat="x in things2">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
It seems like you're confused by the number at the end of the class.
While nesting .col-xs-6 inside another .col-xs-6, you will get a column which takes only 50% of the width.
It's a primary principle of 12 column grid. Divide 100% / 12 = 8.33333333333% and you will get width property of a single column in percents, please have in mind that the width in percents is calculated according to the parent width.
Bootstrap's grid is not informative while nesting.
Eg. think of .col-xs-6 as width: 50%;, .col-xs-4 is width: 33.33333%;
halfzebra is right. If you you nest columns you always have new 12 columns inside another one.
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
This will fill col-md-6
</div>
</div>
</div>
And like in example above I always like to use rows when Im starting one.
I don't know if I got you right but you could do something like this:
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
<div class="row">
<div class="col-md-12">
<h4>My Subtitle 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
<div class="cube">
<b>{{x.title}}</b> </br> {{x.content}}
</div>
</div>
</div>
</div>
</div>
</div>
Keep in mind that your red boxes are not always fitting in to the columns. I changed width to 100% so you can see how columns are acting.
Plunker: http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview
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.
Can't figure out why the columns aren't being structured with this HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
Try this:
DEMO
<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class -->
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
About
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<img src="image.png" />
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
SHARE
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
</div>
</div>
You need to nest the interior columns inside of a row rather than just another column. It offsets the padding caused by the column with negative margins.
A simpler way would be
<div class="container">
<div class="row">
<div class="col-md-4">
About
</div>
<div class="col-md-4">
<img src="image.png">
</div>
<div class="col-md-4">
SHARE
</div>
</div>
</div>
Your Nesting DIV structure was missing, you must add another ".row" div when creating nested divs in bootstrap :
Here is the Code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4"> About
</div>
<div class="col-md-4">
<img src="https://www.google.ca/images/srpr/logo11w.png" width="100px" />
</div>
<div class="col-md-4"> SHARE
</div>
</div>
</div>
</div>
</div>
Refer the Bootstrap example description for the same:
http://getbootstrap.com/css/
Nesting columns
To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).
Here is the working Fiddle of your code: http://jsfiddle.net/52j6avkb/1/embedded/result/
While this does not address the OP's question, I had trouble with my bootstrap rows / columns while trying to use them in conjunction with Kendo ListView (even with the bootstrap-kendo css).
Adding the following css fixed the problem for me:
#myListView.k-widget, #catalog-items.k-widget * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Have you checked that those classes are present in the CSS?
Are you using twitter-bootstrap-rails gem?
It still uses Bootstrap 2.X version and those are Bootstrap 3.X classes. The CSS grid changed since.
You can switch to the bootstrap3 branch of the gem https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3 or include boostrap in an alternative way.
Make sure that you have linked the CDN link.
//Latest version v5
<div class="col-md-12"> // This line is optional.
<div class="col-md-4"> // Start from here.
About
</div>