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;
Related
I have Bootstrap 3 layout. Content is based on 10 from 12 available columns. Let's say I have something like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-3">CENTER COL</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
With this I have left and right columns positioned as I want it to be - one column width from both, left and right sides of browser window. And I want to position center column exactly in center, between left and right columns, to have same margin between them.
When using offset / pull / push bootstrap classes, they are positioning columns too much left or right.
I have made my own workaround class .col-center which works like .col-lg-offset-1 only I'm using calc() function to subtract the offset in pixels from bootstrap's percentage value. But in my opinion this solution kind of sucks.
Any advice?
edit:
sample image to describe better
Can you not align the content within the columns to get what you're after?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">LEFT COL</div>
<div class="col-xs-4 text-center">CENTER COL</div>
<div class="col-xs-4 text-right">RIGHT COL</div>
</div>
</div>
I believe this can't be done in bootstrap. But you can achieve this result by adding a customized class and additional markup. Try if this works for you and breaks nothing :P
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-lg-offset-1">LEFT COL</div>
<div class="col-lg-4">
<div class="col-center col-lg-9"> CENTER COL
</div>
</div>
<div class="col-lg-3 col-lg-pull-1 pull-right">RIGHT COL</div>
</div>
</div>
CSS
.col-center {
margin: auto;
float: none;
}
You can add flexbox and distribute the cols evenly.
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'm trying to do something like,
______Empty space__________________|-----first column(aligned to right)-----|
|--logo--|____Empty space_____________|----second Column(aligned to right)----|
but its auto aligning into the empty space left by my first column like this,
|--logo--||-------second col------------||------------first column----------|
why is that and how to fix this?
Use offsets. Look at the
example from the docs:
http://getbootstrap.com/css/#grid-offsetting
<div class="row">
<div class="col-md-offset-6 col-md-6">first column right</div>
</div>
<div class="row">
<div class="col-md-2">Logo</div>
<div class="col-md-5 col-md-offset-5">second column</div>
</div>
..
Use the .col-*-offset-* class, this will push your div to the right based on the grid system of Bootstrap, example:
<div class="col-md-offset-3"></div>
This will push the div 3 columns to the right
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