CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Manjay_TBAG
Manjay_TBAG

Reputation: 2245

Border in row and columns of bootstrap divs

I have created a jsFiddle. I want the border should be between both row lines but background color to like what its showing in js fiddle. How can I extend this column border line.

My Html 

<div class="container top5">
    <div class="row">
        <div class="col-md-12 col-xs-12">
            <div class="row">
                <div class="col-md-3 col-xs-3 inner">
                   <div><b>Type</b></div>
                </div>
                <div class="col-md-3 col-xs-3 inner">
                   <div class=""><b>SMS</b></div>
                </div>
                <div class="col-md-3 col-xs-3 inner">
                   <div class=""><b>Email</b></div>
                </div>
                <div class="col-md-3 col-xs-3 inner-end">
                    <div class=""><b>Business Unit</b></div>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-xs-12">
            <div class="row border-between">
                <div class="col-md-3 col-xs-3 inner">
                    <span>Another tesing text</span>
                </div>
                <div class="col-md-3 col-xs-3 inner">
                    <span> test</span>
                </div>
                <div class="col-md-3 col-xs-3 inner">
                    <span>Random text</span>
                </div>
                <div class="col-md-3 col-xs-3 inner-end">
                    <span>Random text</span>
                </div>
            </div>
        </div>
    </div>
</div>

And Css 

.top5 {
    margin-top: 50px;
}

.row {
    border: 1px solid;
}

.row + .row {
    border-top:0 ;
}

My Fiddle - https://jsfiddle.net/ff49tu79/13/

Upvotes: 2

Views: 11308

Answers (1)

Chiller
Chiller

Reputation: 9738

you may wanna use padding instead of margin in cells and use flex box to flex the div cells together

.top5 {
  margin-top: 50px;
}

.row {
  border: 1px solid;
}

.row + .row {
  border-top: 0;
}

.flx {
  display: flex;
}

.inner {
  background: aliceblue;
  border-right: 1px solid blue;
  padding: 10px 15px;
}

.inner-end {
  background: aliceblue;
  padding: 10px 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container top5">
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <div class="row">
        <div class="flx">


          <div class="col-md-3 col-xs-3 inner">
            <div><b>Type</b></div>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <div class=""><b>SMS</b></div>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <div class=""><b>Email</b></div>
          </div>
          <div class="col-md-3 col-xs-3 inner-end">
            <div class=""><b>Business Unit</b></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-12 col-xs-12">
      <div class="row border-between">
        <div class="flx">
          <div class="col-md-3 col-xs-3 inner">
            <span>Another tesing text</span>
            <div>1</div>
            <div>2</div>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <span> test</span>
          </div>
          <div class="col-md-3 col-xs-3 inner">
            <span>Random text</span>
          </div>
          <div class="col-md-3 col-xs-3 inner-end">
            <span>Random text</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

See JSFIDDLE

Upvotes: 2

Related Questions