i want to create a responsive webpage with twitter bootstrap. I have a picture which should be a certain width and a bar with a background color which should have the same width and both should be aligned on the left and right side.
As Bootstrap uses padding-left:-15px; padding-right:-15px; I have this effect:
http://codepen.io/anon/pen/thsgC
This confuses me. How can I align both rows with Bootstrap accordingly without overwriting bootstraps own css classes .row and .col-xs-12
Thanks.
In Bootstrap the col-* class has padding on it. To get around it you can either override it (not recommended) or place the background coloured div inside another div:
<div class="col-xs-12">
<div class="navigation">color</div>
</div>
Like this http://codepen.io/anon/pen/ixcmg
Actually both rows are aligned correctly. The problem is in the first row, image element is child of col-xs-12 element while in second row, navigation class is on the same div element which has col-xs-12 element
try to put navigation class in child element of col-xs-12 like this
<div class="row">
<div class="col-xs-12">
<div class = "navigation">
color
</div>
</div>
</div>
also its not good practice to overwrite bootstrap's own classes, you can give extra class to the element which should be used to overwrite bootstrap css property values.
Related
I'm trying to make my cards row responsive with some margin but when I apply margin:5px; to my cards, the row overflows. They are not aligned at the center correctly. There is some space left on the right side of the cards. How can I make them aligned at the center properly?
Here is my HTML and CSS:
http://codepen.io/reklamarsiv/pen/vgPLLv
You need to put the padding and margin inside of the col-* tags. Create a div inside with the class of card instead of putting the class of card in the same div.
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
// contents of card...
</div>
</div>
Updated codepen: http://codepen.io/anon/pen/rjRpQd
I'm working on a static, responsive HTML page.
I made a div with class 'row' then put another div with class 'col-2' that is empty then another div with class 'col-2' that has some text in it. This text should be displayed 16.6% away from the left most point of the browser. However, that's not the case unless I put something inside the first div with class 'col-2' - instead, it's putting that text at the left most point on the page, as if I didn't have a div with class 'col-2' before it.
I get that since the div is empty it's not being displayed but then how am I suppose to use the grid view exactly?
Code:
<div class="section header">
<div class="row">
<div class="col-2"></div>
<div class="col-2">
Title
</div>
</div>
</div>
divs are displayed as full-width blocks by default. If you want the col-2 class to display inline with a specified width, you need to declare it as such:
.col-2 {
display: inline-block;
width: 16.66666%
}
example: http://jsfiddle.net/dno5dzgL/5/
I am using bootstrap and I was wondering what would be a clean way to give a background to my container.
I am using the bootstrap class container, not container-fluid. Bootstrap doc clearly states that I shouldn't nest containers, so what is the alternative to achieve this goal ? If I set a background to my container the left and right margins are still white, I want to colour that space as well, but I also want my content to be aligned the way the container is aligned, not the way the container-fluid is aligned. Any suggestions ? My current solution is nesting a container inside container-fluid and remove the padding from the first one, but I want to make a better solution that doesn't go against the bootstrap documentation.
Thanks in advance !
EDIT
Here is for example what I had
<div class="container-fluid my-class">
<div class="container">
Some rows and columns here
</div>
</div>
and then I override bootstrap's padding in css
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.my-class {
background: red;
}
But, like I said, this is the bad way to do it.
Bootstrap doc clearly states that I shouldn't nest containers under other containers so just nest your container div under a new class div say, container-bg and add the background-image to that div like this:
HTML:
<div class="container-bg">
<div class="container">
<!-- your content -->
</div>
</div>
CSS:
.container-bg {
background: xxx;
}
If you want to set the background for the whole page, then set it on body.
If you want to set it for a section of the page, then wrap that section in an appropriate element (such as div or section), add a class, id or some other way to target it with a selector … just not one that uses a class provided by Bootstrap.
For Boostrap V4.0 and later
If you want to use boostrap colors as background, you can use these colors for the background, like below example
<div class="container bg-dark">
<!-- your content -->
</div>
For some reason I cannot add margin between grid items
Page with margin issue
This page margin shows perfectly:
Proper page
I suspect it has to do with CSS, I tried everything but nothing seemed to work. Can someone please help?
What you need to do is move your .grid class styling to a new parent element inside your grid column, the column itself takes up a full 25% of the width of the page and has internal padding to create the illusion of margin.
<div class="grid col-sm-3 col-xs-6">
to
<div class="col-sm-3 col-xs-6">
<div class="grid">
You can see a quick example of this by moving your .grid class to the .description child element, the styling goes a bit wacky but you will be able to see the margins between your columns.
I need to design something the first one in the picture below, there should not be left or right padding.
What I really want to do is:
Two columns with background color. I've added two columns but bootstrap container and column classes adds padding and margins.
Content inside those columns must be in normal paddings and margins.
There must be no space / gutter between cols.
It must be follow bootstrap's breaking points.
You don't need to change anything in native Bootstrap to achieve this if you have two <div>s in the same <row>. Just move your left and right classes into the same line as col-xs-4 / col-xs-8. Also you shouldn't have a <section> as a parent of your <container>, you should move it be a child of container (though I removed it below, since it seems unecessary).
Example:
<div class="container"> //change this to container-fluid if you want full screen width
<div class="row">
<div class="col-xs-4 left">
</div>
<div class="col-xs-8 right">
</div>
</div>
</div>
JS Fiddle Demo
Create a nopadding class like this one:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
If you add that class to your column divs there will be no padding on them.