here is my code
<div class="community_content">
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
<div class="col-sm-3"></div>
</div>
but i can'nt understand how i add spaces between columns
here is the image of the of layout which i want
img
You can include another div inside each .col-sm-3 div. Like this:
<div class="col-sm-3">
<div class="box">the content</div>
</div>
Then format this div as you wish.
You can use padding to gain that effect. Here you can see an example where the gray boxes are the .col-sm-3 and the black boxes are the div element inside the parent div. So without the borders, you will get the effect.
Link to Codepen: http://codepen.io/RasmusLauridsen/pen/wzLqXa
Like this:
<div class="col-sm-3"><div class="div">One</div></div>
Related
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
What i have is sidebar and on right side i have content. What i want is that both sides are in container but that are both full width . This is my demo: https://jsfiddle.net/DTcHh/19067/
So i want that left background color start from beging of page but text inside is in container and also i want that background color of right content go to the end of page but text is in container. Any suggestion?
<div class="container">
<div class="col-md-3">
<div class="left_sidebar">
menu
</div>
</div>
<div class="col-md-9">
<div class="right-content">
content
</div>
</div>
</div>
Its simple, wrap the colored containers above the container class and use two different containers:
<div class="left_sidebar">
<div class="container">
<div class="col-md-3">
menu
</div>
</div>
</div>
<div class="right-content">
<div class="container">
<div class="col-md-9">
content
</div>
</div>
</div>
Here is a working Fiddle
REMOVED other edits because EDIT 3 should do the trick best
EDIT 3
Here it is, that must be it for sure now. The trick is done with a linear gradientand a custom container above your bootstrap container.
See Fiddle
What you're asking, is by default impossible, since the .container class has a set width on different viewports and it is also horizontally "centerised" by margin:auto.
To achieve what you are trying you will have to follow a different "logic".
I would propose something like this:
<div class="left-sidebar col-md-3">
<div class="sidebar-menu col-xs-6 pull-right">
menu
</div>
</div>
<div class="right-content col-md-9>
<div class="content-text col-xs-10>
content
</div>
</div>
I propse this solution in order to stay in the same "flow" as your code. You could also, just play with paddings, which makes more sense.
use class row before col div
<div class="row">
<div class="col-md6"></div>
<div class="col-md-6"><div>
</div>
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 a row and column inside a container in Bootstrap 3 grid.
The problem is, what is the correct syntax to give row a background without left and right padding ?
See the example here:
JS FIDDLE
Add this to your css, and it should do the trick
.container {
padding: 0;
margin:0;
}
Container class add left and right padding/margin.
Do not use container.
<div class="row">
<img src="http://alphawolves.net/dev/vesna/image/slider01.jpg" alt="" class="img-responsive"/>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p><- - why is this space here and on the right side ? </p>
</div>
</div>
</div>
JSFIDDLE
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>