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
Related
I'm trying to make 2 columns with space between but when I try to add margin-right the column goes down, can somebody help me
<div class=row>
<div class="boxi col-6">
a
</div>
<div class="boxi col-6">
a
</div>
</div>
Im not sure, but did u tried do it like that? If u adding margin to 2xcol-6 there is no more space to keep it in one row since grid have 12 cols. Also u can do it your way but add padding maybe instead of margin?
<div class=row>
<div class="col-6">
<div class="boxi">
a
</div>
</div>
</div>
check whether added a bootstrap cdn to your html file
Add bootstrap container class
<div class="container">
<div class="row">
<div class="col-md-6">
aaaaaaa
</div>
<div class="col-md-6">
aaaaaa
</div>
</div>
</div>
try with adding negative values to margin-right or try with margin-left or padding left or right property
If you don't want to shift other column down then you probably need to maintain inline column properties within DIVs.
Try:
padding: 0 15px 0 0;
OR:
padding-right: 15px;
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
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>
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".
Is there a way in Bootstrap 3 to right align a div?
I am aware of the offsetting possibilitys but I want to align a formatted div to the right of its container while it should be centered in a fullwidth mobile view. The class 'pull-right' is not working anymore. Did they forgot to replace it or am I missing something obvious?
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<!-- The next div has a background color and its own paddings and should be aligned right-->
<!-- It is now in the right column but aligned left in that column -->
<div class="yellow_background">right content</div>
</div>
</div>
</div>
Shure I know how to do this in CSS, but can it be done in pure bootstrap 3?
The class pull-right is still there in Bootstrap 3
See the 'helper classes' here
pull-right is defined by
.pull-right {
float: right !important;
}
without more info on styles and content, it's difficult to say.
It definitely pulls right in this JSBIN
when the page is wider than 990px - which is when the col-md styling kicks in,
Bootstrap 3 being mobile first and all.
Bootstrap 4
Note that for Bootstrap 4 .pull-right has been replaced with .float-right
https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the%20Bootstrap%20Grid.
Do you mean something like this:
HTML
<div class="row">
<div class="container">
<div class="col-md-4">
left content
</div>
<div class="col-md-4 col-md-offset-4">
<div class="yellow-background">
text
<div class="pull-right">right content</div>
</div>
</div>
</div>
</div>
CSS
.yellow-background {
background: blue;
}
.pull-right {
background: yellow;
}
A full example can be found on Codepen.
i think you try to align the content to the right within the div, the div with offset already push itself to the right, here some code and LIVE sample:
FYI: .pull-right only push the div to the right, but not the content inside the div.
HTML:
<div class="row">
<div class="container">
<div class="col-md-4 someclass">
left content
</div>
<div class="col-md-4 col-md-offset-4 someclass">
<div class="yellow_background totheright">right content</div>
</div>
</div>
</div>
CSS:
.someclass{ /*this class for testing purpose only*/
border:1px solid blue;
line-height:2em;
}
.totheright{ /*this will align the text to the right*/
text-align:right;
}
.yellow_background{
background-color:yellow;
}
Another modification:
...
<div class="yellow_background totheright">
<span>right content</span>
<br/>image also align-right<br/>
<img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
hope it will clear your problem
Bootstrap 4+ has made changes to the utility classes for this. From the documentation:
Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
So use the .float-right (or a size equivalent such as .float-lg-right) instead of .pull-right for your right alignment if you're using a newer Bootstrap version.
Add offset8 to your class, for example:
<div class="offset8">aligns to the right</div>