I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.
Related
If I have a scenario using Bootstrap 5 like...
<div class="container">
<div class="row row-cols-auto">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
All columns currently take whatever width their content needs.
I want column two to be as wide as it can be without interfering with the display of columns one and two.
Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?
Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".
<div class="container">
<div class="row">
<div class="col-auto">One</div>
<div class="col">Two</div>
<div class="col-auto">Three</div>
</div>
</div>
I have the following footer that is broken to 2 part: an upper part and a lower part:
The upper part of the footer contains 4 divs and its css has:
display:flex;
justify-content:space-between;
While the lower part contains 3 divs (1 is completely empty) and also its css has:
display:flex
justify-content:space-between;
What I want is to make the unordered list that starts with TERMS & CONDITIONS in the bottom part of the footer to start just under the unordered list that ends with BEST PLAYERS in the upper part of the footer, so along this red line:
The best way to do this, is to rearrange you html code: Instead of making two rows footer, make it one row with two columns, the first column is for the logo and the second column divided into two rows as well, with three columns
<div class="row">
<div class="col-3">
<div class="logo">
<img src="your-logo.png" alt="logo">
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">fixtures</div>
<div class="col-4">latest tweets</div>
<div class="col-4">follow</div>
</div>
<div class="row">
<div class="col-4">blank</div>
<div class="col-4">terms & privary</div>
<div class="col-4">social icons</div>
</div>
</div>
I need to build a pyramid of content blocks using the Foundation grid.
The problem is that for rows that are not divisible by 12, I cannot stack the next row in the pyramid so that it is centered under the row above it.
It is like I need a half column offset or something equivalent.
I thought about using .centered on a nested row, but that seems to have the same problem of dividing half columns.
<div class='row'>
<div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
<div class='small-5 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
<div class='small-4 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-1 columns'>3</div>
<div class='small-3 columns'></div>
</div>
Fiddle:
http://jsfiddle.net/1cq1gqtq/
I would use block grid instead. The block grid utility will fill up whatever available space is created by the row above.
See the Foundation docs for examples of how to use it: http://foundation.zurb.com/docs/components/block_grid.html
I use this a lot when I need no padding on the left/right sides of the outer columns.
I've got a two column page:
<div class="col-md-5">
...
</div>
<div class="col-md-7">
...
</div>
On desktop and tablet screens, the first div appears to the left of the second div, as we would expect. On smaller screens, the first div appears on-top of the second div, again, as we would expect. What I'm wondering is.... Is it possible, on smaller screens, to flip the order of these two so that the second div appears on top of the first?
Sure! This is built into Bootstrap version 3, with classes like col-[size]-push-[cols], as in the column ordering section of Bootstrap's documentation
Demonstration in this fiddle, using the below code based on Bootstrap's example.
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-push-3">First on mobile, second on desktop</div>
<div class="col-sm-3 col-sm-pull-9">Second on mobile, first on desktop</div>
</div>
</div>
I'm using Skeleton css boilerplate. I have the following html:
<div class="container">
<div class="twelve columns">
some content here...
</div>
<div class="four columns">
some bottomed content here...
</div>
</div>
I want the right (four columns) to be aligned to the bottom.
I have tried the following:
...
<div class="four columns">
<div style="position:absolute;bottom:0;">
some bottomed content here...
</div>
</div>
...
which works until the width of the screen is too narrow to fit the two columns side by side, where the right column appears below the left column, which is exactly what I want, except that when the position:absolute;bottom:0; is added, it aligns itself over the top of the bottom of column 1.
I have also tried adding a top-margin and a padding-top with no effect.
Any ideas as to how I can get this to work.
Have you tried adding this?
<div class="twelve columns clear">
.clear { clear: both;}