Boostrap subtract border lines of container

July 11, 2022

I have a this container (React):

<div className='container mt-3  border border-white'>
      {[...Array(3).keys()].map((row) => (
        <div key={row} className='row'>
          {[...Array(3).keys()].map((col) => (
            <div key={col} className='border border-dark col'>
              <p>{row * 3 + col + 1}</p>
            </div>
          ))}
        </div>
      ))}
    </div>

I have this grid container and I’d like to remove the border from the outer part, I tried border-0 but it doesn’t work and with border border-white the line is still visible

for clarity:

>Solution :

I’m afraid you can’t do it easily using bootstrap classes.

Inspired from this answer, you could do :

.container .col {
  border: 1px solid black;
}

.container .row:first-child .col {
  border-top: none;
}

.container .row:last-child .col {
  border-bottom: none;
}

.container .row .col:first-child {
  border-left: none;
}

.container .row .col:last-child {
  border-right: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class='container mt-3'>
      <div class="row">
          <div class="col">
            <p>col</p>
          </div>
          <div class="col">
            <p>col</p>
          </div>
          <div class="col">
            <p>col</p>
          </div>
      </div>
      <div class="row">
          <div class="col">
            <p>col</p>
          </div>
          <div class="col">
            <p>col</p>
          </div>
          <div class="col">
            <p>col</p>
          </div>
      </div>
  </div>