I can't understand why this doesn't work. There are 12 columns but it's work only with 11
HTML
<section>
<div class="container">
<div class="row">
<div class="advantages col-12">
<div class="col-4">one</div>
<div class="col-4">two</div>
<div class="col-4">three</div>
</div>
</div>
</div>
</section>
SASS
.advantages
text-align: center
div
display: inline-block
You should remove col-12 and let your col-4 sit within .row. A col must be immediately preceeded by a row.
Since 4+4+4 = 12, you don't have to define your previous col-12, and you shouldn't have to set anything to inline-block.
It's what #Jay Kariesch said, but you can also keep advantages in the same div as row, like this:
<div class="advantages row">
This way you will keep advantages class working for all the divs inside.
Related
I want to center vertically the divs inside the container but the columns take the height of the document and not of main (whom height equals the one of its content) Hereby my code:
<main class="col-lg-12">
<div class="col-lg-1 col-md-0"></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<img src={{image}}>
</div>
<div class="col-lg-1 col-md-0" ></div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="title">{{title}}</div>
<div class="text">{{text1}}</div>
</div>
<div class="col-lg-1 col-md-0"></div>
</main>
main div{
height: 100%;
}
I can see in Developer Tools that the div takes 100% of the doc not of main... How could I fix this in order to vertically align the image?
Thank you!
first bootstrap .col should be in .row container
you might need one in your main col to nest columns inside
then, don’t write css to set height:100% on columns, you dont need that.
If I’m right .col have display: flex, so you can use align-items-stretch class to make you column taking the height of their wrapper, being the missing .row
I suppose you will need a height:100% on the row. to do that add it a class h-100
I have Bootstrap 3 layout. Content is based on 10 from 12 available columns. Let's say I have something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-3">CENTER COL</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
With this I have left and right columns positioned as I want it to be - one column width from both, left and right sides of browser window. And I want to position center column exactly in center, between left and right columns, to have same margin between them.
When using offset / pull / push bootstrap classes, they are positioning columns too much left or right.
I have made my own workaround class .col-center which works like .col-lg-offset-1 only I'm using calc() function to subtract the offset in pixels from bootstrap's percentage value. But in my opinion this solution kind of sucks.
Any advice?
edit:
sample image to describe better
Can you not align the content within the columns to get what you're after?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">LEFT COL</div>
<div class="col-xs-4 text-center">CENTER COL</div>
<div class="col-xs-4 text-right">RIGHT COL</div>
</div>
</div>
I believe this can't be done in bootstrap. But you can achieve this result by adding a customized class and additional markup. Try if this works for you and breaks nothing :P
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-4">
<div class="col-center col-lg-9"> CENTER COL
</div>
</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
CSS
.col-center {
margin: auto;
float: none;
}
You can add flexbox and distribute the cols evenly.
I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
I have place two div inside an inline-flex div one of the two divs width reduces. I'm using bootstrap:
<section>
<div class="container">
<div class="flexx">
<div class="foo">
....
</div>
<div class="col-md-10">
<div class="card">
<div class="card-block">
...
</div>
</div>
</div>
</div>
</div>
</section>
Basically, foo class should be inline with col-md-10 which it does but col-md-10 gets small instead it should still be at 100%. Am I doing it correct? I'm not strong with css/scss.
I'm not sure I entirely understand your issue. inline-flex items do not default to full width. You will need to add some css for that to happen since in the css for bootstrap the flex-grow property is set to 0;
I think adding one style and a class will fix your issue, again if I understand you right.
// to your html
<div class="col foo">
....
</div>
// to your css
[class^="col"] {
flex-grow: 1;
}
Check out this pen for help
I have been looking over other questions posted on SO and tried the CSS however I cannot seem to align the "box" HxV within the container.
What is the best way to get it to display HxV responsive?
HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 center-block">
box
</div>
</div>
</div>
Create an class like .centred-col and write an rule like
.centred-col{ float: none; margin:auto;}add this after ur .col classes.
Using .container centers and auto margins your grid to begin with, there should be no need for offsets:
<div class="container">
<div class="row">
<div class="col-xs-12">
box
</div>
</div>
</div>
Note: .col-xs-12 will set your column to the full width after container margins from the XS size to the LG size.
Documentation: Bootstrap CSS Documentation under "Containers".