bootstrap grid with border between columns

Question

How can i make a bootstrap grid with one row and inside that 2 columns. First column size 9 col-md-9 and the second size 3 col-md-3 that no matter how long the content will be inside the columns the row and columns will be nice and border between them. How can I do it? It should look like this:

Not like this:

Here is a jsfiddle

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

Dennis Novac · Accepted Answer · 2017-08-10 17:32:32Z

6

An universal solution would be to use flexbox.

This will allow your columns to have always equal height.

Here is a fiddle: https://jsfiddle.net/Gt25L/1280/
(I supposed you'd have to add specific class, because rows and cols are too general, but I believe you got the point)

.row {
  display: flex;
}

.row > div {
  flex: 1;
  background: lightgrey;
  border: 1px solid grey;
}

<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

edited Aug 10, 2017 at 17:32

answered Aug 10, 2017 at 17:21

Dennis Novac

1,01110 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bharat Over a year ago

but if we have specifying there with two more columns without specifying row its not well display; like jsfiddle.net/wnqb1L23/1 ; is there any way for the same

TomSawyer Over a year ago

still have double border in common between 2 columns

Christopher Messer · Accepted Answer · 2017-08-10 17:17:47Z

Slightly ghetto, but you could use background color on the row, not the columns, and add a border on just one of the columns (assuming you're always going to have more content on the left column)

https://jsfiddle.net/Gt25L/1277/

<div class="container">
<div class='row'>
  <div class="col-xs-9 border">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
</div>
.row {
  background: lightgrey;
  border: 1px solid grey;
}

.border {
  border-right: 1px solid black;
}

G-Cyrillus · Accepted Answer · 2017-08-10 19:25:38Z

You could use boostrap4 (flexbox) or play around with box-shadow to draw borders and set background into the parent container :

Drawing inset and outset shadows will make them overlap so you will not notice wich is the tallest box.

.row {
  background: lightgrey;
  border-top: 2px solid grey;
  box-shadow: 0 2px grey, inset 2px 0 gray, inset -2px 0 grey;
  overflow: hidden;
}

.row>div {
  box-shadow: 2px 0 grey, inset 2px 0 grey
}


/* demo purpose*/

.row {
  margin: auto!important;
  max-width: 80%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class='row'>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
<div class='row'>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
</div>

about bootsrap 4 https://v4-alpha.getbootstrap.com/

.row>div {
  background: lightgrey;
  border: 1px solid grey;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class='row'>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

    </div>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
  </div>
  <div class='row d-flex'>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

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

Agnaldo Luiz Cunha · Accepted Answer · 2017-08-10 17:15:41Z

You can use <div class="col-xs-offset-1"> wrapping the text to offset it, avoiding any extra CSS. See the snippet below:

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
     <div class="col-xs-offset-1">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
  </div>
  </div>
  <div class="col-xs-3">
     <div class="col-xs-offset-1">
        Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
  </div>
</div>

Michael Coker · Accepted Answer · 2017-08-10 17:25:36Z

If you don't mind specifying the width of one of the elements, you can use a negative margin, then increase the width by the margin amount.

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

.row > div:last-child {
  margin-left: -1px;
  width: calc(25% + 1px);
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class="col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg

    </div>
    <div class="col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg

      <br>
      <br>Hifgdfgsdfg
    </div>
  </div>

Collectives™ on Stack Overflow

bootstrap grid with border between columns

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related