How to stick bootstrap box together?

Question

How to stick the columns together with bootstrap and css?

I would like to create something like this:

What I have created:

Here is my HTML & CSS markup:

<div class="container">
    <div class="row">
        <div class="col-md-4 ">
            <div class="box1">
            <h1>this is box 1 one</h1>
            </div>
        </div>

        <div class="col-md-4 ">
            <div class="box2">
            <h1>this is box 1 one</h1>
            </div>
        </div>

        <div class="col-md-4 ">
            <div class="box3">
            <h1>this is box 1 one</h1>
            </div>
        </div>

    </div>
</div>

My css

.box1 {
    background: red;
}

.box2{
    background: green;
}

.box3 {
    background: yellow;
}

Every single help would be appreciate!

You are using bootstrap default classes which are having default styling like ```padding```, ```margin``` that's why you are getting current result. — aavrug, Dec 23 '16 at 10:17
@aavrug I know right. that's why I am asking any solution for this issue? — R3y, Dec 23 '16 at 10:20
@R3y: Check this question for more details: http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 — Sayed Rafeeq, Dec 23 '16 at 10:37
Possible duplicate of [Bootstrap 3 grid with no gap](http://stackoverflow.com/questions/18202240/bootstrap-3-grid-with-no-gap) — Rahul, Dec 23 '16 at 10:45
It's very simple you need remove left and right padding from your columns just you need to add this class in your custom css " .nopadding { padding: 0 !important; margin: 0 !important; }" and call in your HTML like this...
@R3y — Sayed Rafeeq, Dec 23 '16 at 11:03
Anyway, thank you for all of you to answer my question. I know sometimes we may cause some mistake but as a coder/ programmer / developer , we should really helping each other right?! Let's make this community better! — R3y, Dec 23 '16 at 11:14

score 1 · Answer 1 · answered Dec 23 '16 at 10:34

There are many possibilities depending on what you are trying to achieve exactly.

If you want to remove the gap (called gutters) between ALL the columns of your design, you can customize your own bootstrap at http://getbootstrap.com/customize/#grid-system you'll see the variable "@grid-gutter-width" that needs to be set to 0.

If you want to have some contents that span outside the gutters, so they can touch adjascent elements, use a class to negate the gutter. Something like

.no-pad{
    padding-left:0;
    padding-right:0;
}

And add it to all columns you want without gutter.

If you want the background color to touch but still keep a nice sepperation of columns for your text, you can simply apply the background styles on the column itself.

You will need to add !important to ensure specificity. The css above currently does not work. see example: https://jsfiddle.net/BradChelly/wvLLcuj7/ — Brad, Dec 23 '16 at 10:51
Either add important or use a more precise css target, you are right. — Salketer, Jan 02 '17 at 09:16

score -1 · Answer 2 · answered Dec 23 '16 at 10:26

-1

The only way to achieve the result you are after is to remove the padding from Bootstraps column classes, like so:

.col-md-4 {
   padding: 0;
}

However the above code will remove the padding from all col-md-4 column classes in your HTML. Best practise would be to add a unique class/ID and target the column that way, like so:

<div class="myClass">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 ">
                <div class="box1">
                <h1>this is box 1 one</h1>
                </div>
            </div>

            <div class="col-md-4 ">
                <div class="box2">
                <h1>this is box 1 one</h1>
                </div>
            </div>

            <div class="col-md-4 ">
                <div class="box3">
                <h1>this is box 1 one</h1>
                </div>
            </div>

        </div>
    </div>
</div>

.myClass .row .col-md-4 { 
   padding: 0;
}

This way you are only targeting specific code and not ALL the columns.

answered Dec 23 '16 at 10:26

Neelam Khan

1,078
8
24

Was writing the same solution. – Rahul Dec 23 '16 at 10:30
1

-1 because of hack. There are a lot of ways to handle it, but overwriting your framework's bases is not a good and lasting solution. You'd have to actually do it for 72 classes if you had a 12 columns grid counting the 5 media targets for each. – Salketer Dec 23 '16 at 10:36
@Neelam Khan: We need to don't overwrite default classes. It will conflict with other sections. Simply we can call new class like this .nopadding { padding: 0 !important; margin: 0 !important; } – Sayed Rafeeq Dec 23 '16 at 10:41
Coding is subjective and there are many ways to achieve the outcome, my solution is one of many @Salketer – Neelam Khan Dec 23 '16 at 10:41
@NeelamKhan you are right, it is one solution but a poor one is what I wanted to point out. You should at least add the fact that this CSS has to be put after bootstrap, not before as it will get overwritten instead of overwritting bootstrap's. – Salketer Jan 02 '17 at 09:20

score -1 · Answer 3 · answered Dec 23 '16 at 10:34

Bootstraps grid system adds "gutters" or padding to each column. Is is this that you want to overwrite. however if you were to simply apply padding:0px; to .col-md-4 you would remove padding from all instances of .col-md-4 which is unlikely.

The way around this would be to give a class to the "row" container which you can then target only instances of .col-md-4 within that class. In this example I have added the class boxes to the row. then in the css I use:

.boxes .col-md-4 {
  padding-right: 0;
  padding-left: 0;
}

this way, my padding changes are restricted to col-md-4 classes that are children of a boxes class.

I hope that helps.

Working example but using col-xs-4 as much smaller viewport:

.row {
  background: #ccc;
}
.box {
  height: 100px;
  margin-bottom: 20px;
  overflow: hidden;
}
.boxes .col-xs-4 {
  padding-right: 0;
  padding-left: 0;
}
.box1 {
  background: red;
}
.box2 {
  background: green;
}
.box3 {
  background: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row boxes">
    <div class="col-xs-4">
      <div class="box box1">
        <h1>this is box 1</h1>
      </div>
    </div>

    <div class="col-xs-4 ">
      <div class="box box2">
        <h1>this is box 2</h1>
      </div>
    </div>

    <div class="col-xs-4 ">
      <div class="box box3">
        <h1>this is box 3</h1>
      </div>
    </div>

How to stick bootstrap box together?

3 Answers3