I have a div and when I use the Chrome DevTools, the div (highlighted in blue) is smaller than its content. The black line shows the actual height of the div while the red line demonstrates how tall the div should be.
This is my code:
<div class="col-md-12">
<div id="survey" class="survey"></div>
</div>
I think it is caused by the flex property of my cards, but I am not sure.
use bootstrap 4 spacing m-0
<div class="col-md-12 m-0">
<div id="survey" class="survey">
</div>
</div>
Learn about bootstrap-spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
Related
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'm sure of the fact that I'm doing something so wrong, I tried to solve that this morning.
Here's the deal, I'm trying to build a responsive HTML page, that will have the behaviour of the picture you see below :
So I told myself, for the elements that have to be move like the elements below "Besoin d'un devis", etc, I will use a the boostrap grid, and use for that an WYSIWIG generator. But instead, when I try to resize the window here's what happens :
Without resizing the window - Normal behaviour :
When I resize the window and I try to test the boostrap grid :
I uploaded a test version in the internet so you can see my problem.
http://test-stackoverflow.co.nf
If you need the code, I will provide it. I just don't know a way to provide a whole "test website" and a case like this in stack.
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
Try this out
I believe you are overwriting Bootstrap's grid system here:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
So, the columns are set, but then your size-2 style here:
.content_block.size_2 {
height: 200px;
width: 280px;
}
will overwrite that column's width.
Remove the width styling and it should work as intended. Please comment if additional help is needed.
Your problem is that you used class container instead of container-fluid in line 110. container has a fixed width, when you decrease your browser width, it stays the same and overflows its parent element. container-fluid has a width of 100%, so it fills your parent element.
Then you also have to adapt the images to 100% width (relative to the col-3) and a appropriate height.
EDIT:
.container has not a fixed width, but your .container-main# starts shrinking immediately because of its relative width, while .container shrinks not until your browser window hits 1200px width or less.
Your .container class is set to 970px. Set it to 100%. Also change the .col-sm-3 to .col-sm-4. Why? Well you 3 items, grid systems exist out of 12, 12/3 = 4.
Also set the width of the image to 100% to prevent overlapping.
Is it possible to pad Twitter Bootstrap columns without breaking the grid? I'm building a design that is centred around 'boxes'.
I have done a fiddle of 3 examples: http://jsfiddle.net/w7zS3/1/
<div class="row">
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
<div class="col-xs-4 box">content...</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
<div class="col-xs-4">
<div class="box">content...</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
<div class="col-xs-4">
<div class="box-padded">content...</div>
</div>
</div>
<hr>
<div class="row box">
<div class="col-xs-6">
header: logo
</div>
<div class="col-xs-6">
header: ad banner
</div>
</div>
</div>
The first is the most semantic but adding a background colour bleeds into the padding creating the illusion of one 'box'.
Throwing another div in there with a background works well, but the text touches the edge of the box which doesn't look very nice.
On the third example i've padded the div and whilst it works it technically breaks Twitter Bootstraps design pattern... if i was to say, nest a grid it wouldn't work due to the padding up taking up space.
This also causes problems on boxes where i don't need padding (4th example on the fiddle) for instance: i'm adding a header in the first 6 columns and a banner ad in the other 6 columns.. but i want the whole header section to be in the same background color (ie.. no space between grids)... I can't add padding as it will break the grid and adding a background colour bleeds into the padding and look wider than the rest of my padded grids. (hope this bit makes sense)
Is there a correct way to get around this?
I typically use columns within columns to provide an effect similar to padding.
Instead of
<div class="col-xs-4">
<div class="box">content...</div>
</div>
Try this:
<div class="col-xs-4">
<div class="box row">
<div class="col-xs-1"></div>
<div class="col-xs-10">content</div>
<div class="col-xs-1"></div>
</div>
</div>
See the change in your second row: http://jsfiddle.net/w7zS3/3/
(I modified the background color to red to make it easier to see the difference between the background and the boxes)
I am using a twitter boostrap fluid layout. When the page loads, it looks fine, but then you notice that you can actually scroll to the right. When you scroll to the right, a small white margin appears on the right of the page.
This codepen shows the issue http://codepen.io/anon/pen/AKygh
The first row div is open. Add a </div> at the end of this:
<div class="row" style="background-color: blue;">
<div class="col-md-4 col-md-push-8">Text on right</div>
<div class="col-md-6 col-md-pull-4 col-xs-offset-1 col-md-offset-2">
<h2>Title</h2>
<p class="lead">Some text </p>
</div>
<div class="clearfix"></div>
Here
</div>
DEMO
try removing <div class="container-fluid">
From the Bootstrap docs.. (http://getbootstrap.com/css/#grid)
"Content should be placed within columns, and only columns may be
immediate children of rows..."
So, since you have a row that is a child of a row.. just change the inner row to a full-width column (col-xs-12):
Demo: http://www.bootply.com/120519
remove margin-right:15px from bootstrap.css on line number 757 class .container-fluid.. and remove margin-right:-15px from same css file on line 763 from class .row...
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>