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
Related
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.
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 use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx
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".
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>