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;}
Related
I have a Foundation framework grid and I have set 2 columns in one row. I am experiencing an unwanted line break from the first column into the next. The problem exists on a "large" screen size. The first column is a "large-2" and the second is a "large-4 large-centered" and for some reason, the image in the second column seems to be below a line break from the first column h2 element, rather than in line, as it should be. Surely the contents of each column should be aligned with the top of the row unless otherwise stated?
Here's the codepen
You need to remove "large-centered" class from the second column for the "line break" to disappear, or put second column in its own row. There could be only one CENTERED column per row, see Grid docs.
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
I'm using Bootstrap and I want to change first column the distance from left. This is illustrated in this picture:
My code:
<div class="container">
<div class="row">
<div class="col-sm-1">
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
</div>
<div class="col-sm-8">.col-sm-7</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</div>
I try with margin-left, padding-left, but I don't found where it's need change.
Change
<div class="container">
to
<div class="container-fluid">
Fiddle here: https://jsfiddle.net/DTcHh/23360/
The .container class adds a max width to that element, and centers it on the page. If you want col-sm-1 all the way to the left, you'll want to remove/adjust how you're using the .container class.
On top of that, .row and .col-sm-* come with some additional margin/paddings. Try using chrome inspector to look at your elements on the page and see how/why they are laid out the way they are.
I have div in container that I want to be col--8 with offset-2 on medium, large, and extra large screens - this would put it in center of page and smaller with wide, however at same time when screen is small or extra small I want to offset to be removed and col--12 div being of full with
I tried with:
<div class="col-xs-12 col-xs-offset-0 col-md-8 col-md-offset-2" >
Some content here...
</div>
What I doing wrong ?
Ps. I also using angular on page...
Remove col-xs-offset-0. it is not necessary.
here is a forked jsFiddle
The classes that you have there should do the job so long as you have properly wrapped the div in parent .container and .row div elements. Including those wrappers would look like the following:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2" >
Some content here...
</div>
</div>
</div>
In Bootstrap 4 the syntax is a little bit change
col-lg-10 offset-lg-2
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.
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
</div>
I understand that you need 12 spans in total. Is there a way to still center align the two spans I have horizontally? The above will just float to the left.
I've tried putting a wrapper around them and margin auto'ng it but nothing happens.
I can go and remove the span class and just add a specified width but I need span class for fluid layout.
If you want to center two columns of span4 you can use offset param like this:
<div class="row">
<div class="span4 offset2"></div>
<div class="span4"></div>
</div>
Remember this may crash in lower resolutions. To prevent that think about using fluid grid layout. This is done by changing
<div class="row">
into
<div class="row-fluid">
Hope that helps!