CODEWITHSUNDEEP
htmlcssbootstrap-4
06011991
06011991

Reputation: 807

How to get rid of border right for the last column and border bottom from the last row from bootstrap columns?

I tried selecting nth-child elements to remove the border-right for the last column and border-bottom from the last row from bootstrap columns but none of them worked. Please find the js fiddle code

.col-xs-3 p:nth-child(-n+3) {
  border-bottom: 1px solid #ff0000;
}

.col-xs-3 p:nth-child(3n+1) {
  border-right: 1px solid #ff0000;
}

.col-xs-3 {
  padding: 0
}
<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-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
  </div>
</div>

I want to remove the borders like in this screenshot (https://prnt.sc/wjvuu8) please suggest some solution?

Upvotes: 1

Views: 210

Answers (1)

Temani Afif
Temani Afif

Reputation: 272842

You can do it like below:

.col-xs-3:nth-last-child(n+5) p {   /* skip the last 4 element and start for the fifth */
  border-bottom: 1px solid #ff0000;
}

.col-xs-3:not(:nth-child(4n + 4)) p { /* don't select the last one of each row (each row contain 4 elements) */
  border-right: 1px solid #ff0000;
}

.col-xs-3 {
  padding: 0!important;
}
p {
  margin:0!important;
  padding:10px;
}
<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-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
    <div class="col-xs-3">
      <p>Stuff that fills this column</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions