I have been trying to align three equal columns exactly in the center of a row with equal padding on both sides, inside a container-fluid. I am unable to position them at the center of the page. I have tried setting width to the container inside which those three columns are residing. but the layout keeps going one side and never gets aligned at the center.
<div class="container">
<div class="row yellow">
<div class="col-lg-12 ">
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
<div class="col-lg-3 col-sm-6 col-xs-6 col-xxs-12 green text-center">
test
</div>
</div>
</div>
</div>
Attached is the output that I am recieving:
output
As Shown here, the layout is aligned to right, I want it to align perfectly center with equal padding in between these columns.
It would be good to know how this can be achieved, I've been trying to get this one done for a while. your suggestions will definitely help in fixing this one.
Thanks in advance
Your problem is, that your layout is not summing to 12 columns..
col-lg-3 + col-lg-3 + col-lg-3 are summing to 9 columns and in bootstraps grid-system you have 12 columns per row.
also there is no col-xxs-** class. (lg = large; md = medium; sm = small; xs = extra small)
this shoud do the trick:
<div class="container">
<div class="row yellow">
<div class="col-lg-12 ">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 green text-center">
test
</div>
</div>
</div>
</div>
Take a look at Bootrstaps Docs to learn more about the Grid-System: http://getbootstrap.com/css/#grid
As #Sadi says, the layout is made of 12 cols, so you shoold change your columns from col-lg-3 to col-lg-4. Plus, you should apply your green to the inner container, otherwise you will have no padding:
<div class="container">
<div class="row yellow">
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
<div class="col-lg-4 col-sm-6 col-xs-6 col-xxs-12 text-center">
<div class="green">
test
</div>
</div>
</div>
Codepen: https://codepen.io/giannidk/pen/ZymdOy
Related
I want to resize column width in bootstrap.
Curently, I have 3 <div> with col-md-4. But when one of the <div> hides then I want to change another 2 <div>'s into col-md-6.
Is this possible in bootstrap?
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-4">
</div>
<div id="txthide">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
I'm new to bootstrap. Overall the official manual is easy to understand but I'm trying to stack columns in a certain way between desktop and mobile view and can't figure it out. Image shows what I'm attempting to achieve.
What I'm trying to do
Thanks for any help!
You need to do something like this :
<div class="row">
<div class="col-lg-6">
<div class="row">
<div id="column1" class="col-lg-6 col-sm-12">column1</div>
<div id="column2" class="col-lg-6 col-sm-12">column2</div>
</div>
<div class="row">
<div id="Desc1&2" class="col-lg-12 col-sm-12">desc1&2</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div id="column3" class="col-lg-6 col-sm-12">column3</div>
<div id="column4" class="col-lg-6 col-sm-12">column4</div>
</div>
<div class="row">
<div id="Desc3&4" class="col-lg-12 col-sm-12">DESC3&4</div>
</div>
</div>
I have a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.
Is it possible to have 3 columns (3,6,3) on a wide screen but when brought to mobile or iPad size, the center column drops down so you effectively have the 2 '3' columns come together as '6','6' and under them stacks the full width '12' column?
Currently I have tried the html below, but this stacks them all three on top of each other at the mobile level, rather than dropping the center down to it's own new row.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">TESTING LEFT</div>
<div class="col-sm-12 col-md-6">TESTING MID</div>
<div class="col-sm-6 col-md-3">TESTING RIGHT</div>
</div>
</div>
One way to do this is to create two "Mid" divs, show one when the screen is large, but hide that one when the screen is small. Hide it by adding hidden-md and hidden-lg. Also add hidden-sm and hidden-xs to the first one.
I created a demo with styling so you can see the different divs more easily.
Bootply Demo
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">TESTING LEFT</div>
<div class="hidden-sm hidden-xs col-xs-12 col-md-6">TESTING MID</div>
<div class="col-xs-6 col-md-3">TESTING RIGHT</div>
</div>
<div class="row hidden-md hidden-lg">
<div class="col-xs-12 col-md-6">TESTING MID</div>
</div>
</div>
In your situation, you can do that with push and pull classes:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">LEFT md first in content</div>
<div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
<div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
</div>
</div>
DEMO: http://jsbin.com/muvov/1/
I have this:
<div class="row">
<div class="col-sm-8">
...
...
</div>
</div>
I want those 8 small columns to float in the middle of the available page width. If I add a col-sm-offset-2 but that just pushed everything right, even if there wasn't space. Advice?
If you encompass your row in a container, it should center everything. So that, with the col-sm-offset-2 should achieve what you want, e.g.
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
...
</div>
</div>
</div>