I create a "col-lg-6 text-center" inside a row but it centered only within the column itself. So I have to add 2 more columns "col-lg-3" to make the col-6 lie at center of the page.
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-6 text-center">
<p>Some text</p>
</div>
<div class="col-lg-3">
</div>
</div>
You guys have any way to make the col-lg-6 centered at the page without 2 col-lg-3? I'm very appreciate.
Use col-lg-offset-3 to add offset of 3 columns at left
Plunker solution :
https://plnkr.co/edit/B5Ka3V7BHio0v8ZcMcXr
<div class="row">
<div class="col-lg-offset-3 col-lg-6 text-center">
<p>Some text</p>
</div>
</div>
Related
I have below text link list appearing in a col-md-3. I want to appear them as right-justified. See attached image below.
Current Coding is like below with "text-right" in the col-md-3, I tried text-justify too didn't seem to be working,
Any idea on how to make this the way i wanted as the image?Should i use a '<ul>' or '<li>' instead?
<div class="col-md-3 mt-2 text-right">
<div class="row mt-3">
<div class="col-md-12">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<b>Send Message</b>
</div>
</div>
....
<div class="row mt-3">
<div class="col-md-12">
<b> View Proposal </b>
</div>
</div>
</div>
Don't use text-right on the container. Instead, turn the col-md-12 divs into col-md-6 and use an offset i.e. offset-6. Now the element takes up 6 columns and is offset 6 columns, which puts it to the right of it's parent element.
More information about offsets can be found about halfway down the Bootstrap Grid documentation.
Here's the code demonstrating how to do this:
<div class="col-md-3 mt-2 container">
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>Send Message</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b> View Proposal </b>
</div>
</div>
</div>
Here it is on Codepen
I Just updated my Codepen: https://codepen.io/shnigi/pen/jOWmqLe
It really depends how you want to place your grids and how much content they are going to have.
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Profile</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>Send Message</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Proposal</b>
</div>
</div>
Here I have created three rows which all span 12 columns. Then inside the rows I have element which spans 3 columns and has offset of 9 totalling 12 columns. Then I have placed text-right to make the text float on right inside the 3 column element.
I'm using bootstrap and I have some html like this:
<div class="col-sm-12 mainContainer">
<div class="col-sm-4 imagesContainer">
<div class="col-sm-12 firstImage">
<img src="myimage1.jpg">
</div>
<div class="col-sm-12 secondImage">
<img src="myimage2.jpg">
</div>
</div>
<div class="col-sm-8 textContainer">
<p>here we have some text</p>
</div>
</div>
What I would like is to set the "imagesContainer" of the same height of the "textContainer", put the first image on top of "imagesContainer" and second image to bottom of "imagesContainer".
So, when resizing, stretching or even putting an enourm amount of text, I'll always have a image on top, one at the bottom, and a lot of white space between those two.
Thank you for your help
Please use the same bootstrap class for the following:
<div class="col-sm-4 imagesContainer">
<div class="col-sm-8 textContainer">
After change it will be like:
<div class="col-sm-8 imagesContainer">
<div class="col-sm-8 textContainer">
Final solution will be:
<div class="col-sm-12 mainContainer">
<div class="col-sm-8 imagesContainer">
<div class="col-sm-12 firstImage">
<img src="myimage1.jpg">
</div>
<div class="col-sm-12 secondImage">
<img src="myimage2.jpg">
</div>
</div>
<div class="col-sm-8 textContainer">
<p>here we have some text</p>
</div>
</div>
I have such code:
<div class="row inner">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>image is here...</h1>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
</div>
and so it looks like on mobile:
link
but i need that my second column appears on the top on mobile (not on the bottom)...
can i achieve it somehow without changing html code?
plunker: https://plnkr.co/edit/BKPhHxbZO0VQnubblh7f?p=preview
If using bootstrap why not just add push and pull classes? If you do not want to modify the markup you could do this javascript also. Why would you not want to modify the markup?
<div class="row inner">
<div class="col-md-6 col-md-push-6">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<h1>image is here...</h1>
</div>
</div>
edit
Also, If you want to right align something in bootstrap for a particular media query add it to the stylesheet. So on mobile it would be text-align: right and on your next media to reset it you can add text-align: left
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>
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