Non 12-Divisible Equal Columns on Bootstrap 4

Non 12-divisible Equal columns on Bootstrap 4

Maybe I don't understand the question. Why not just use the lg auto layout columns (col-lg)?

https://www.codeply.com/go/OohsSfM7Zu

<div class="row">
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
    <div class="col-lg">

    </div>
</div>

How can I always get the same column size? (Bootstrap)

You should be able to get the layout you want using Bootstrap’s grid system.

Your image for the layout you want is larger than what Bootstrap-4 provides with the container-xl (Bootstap-5 has a container-xxl), but you can create your own xxl container (my example has the max width at 1440px, but you can change that).

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

<style>
body {
    background-color: #212121;
    color: #fff;
}

h1 {
    color: #B8BABD;
}

hr {
    width: 10%;
    border-top: 5px solid #392A49;
} 

.container-xxl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width:1500px) {
    .container-xxl {
        max-width: 1440px;

    }
}

.vehicule-card {
    border-radius: 10px;
    border: solid 4px #2F3136;
    background-color: #333333;
}

.vehicule-cardbody {
    height: 5em;
}

.vehicule-name {
    background-color: #392A49;
    color: #B8BABD;
    width: 100%;
    text-align: center;
    padding: 3px;
    border-radius: 10px;
    border: solid 4px #2F3136;
}

.vehicule-image {
    border-radius: 10px;
    border: solid 4px #2F3136;
}
</style>

<div class="container-xxl">
    <h1 class="text-center mt-5">VOITURES COMPACTS</h1>
    <hr>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8F8F/000000.png?text=Blista" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Blista</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FFEE8F/000000.png?text=Dilettante" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Dilettante</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/B0FF8F/000000.png?text=Issi" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Issi</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/8FD2FF/000000.png?text=Panto" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Panto</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/AB8FFF/000000.png?text=Prairie" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Prairie</h2>
                </div>
            </div>
        </div>
        <div class="col mb-3">
            <div class="card p-3 m-2 box-shadow vehicule-card">
                <img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8FF4/000000.png?text=Rhapsody" alt="Card image cap">
                <div class="card-body px-0 vehicule-cardbody">
                    <h2 class="vehicule-name">Rhapsody</h2>
                </div>
            </div>
        </div>
    </div>
</div>

7 equal columns in bootstrap

Well, IMO you probably need to override the width of the columns by using CSS3 @media query.

Here is my attempt to create a 7-col grid system:

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

The value of width comes from:

width = 100% / 7 column-number = 14.285714285714285714285714285714%

WORKING DEMO - (jsbin)

Run the code snippet and click on the "Full page".

.col-md-1 {  background-color: gold;}
@media (min-width: 768px){  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1  {    width: 100%;    *width: 100%;  }}

@media (min-width: 992px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}

@media (min-width: 1200px) {  .seven-cols .col-md-1,  .seven-cols .col-sm-1,  .seven-cols .col-lg-1 {    width: 14.285714285714285714285714285714%;    *width: 14.285714285714285714285714285714%;  }}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">  <div class="row seven-cols">    <div class="col-md-1">Col 1</div>    <div class="col-md-1">Col 2</div>    <div class="col-md-1">Col 3</div>    <div class="col-md-1">Col 4</div>    <div class="col-md-1">Col 5</div>    <div class="col-md-1">Col 6</div>    <div class="col-md-1">Col 7</div>  </div></div>

Five Column Bootstrap Layout without changing Grid Size

You would use Bootstrap column offsets. You'd actually use 10 of the 12 columns units, and then offset the first leftmost column like this:

<div class="container-fluid">
    <div class="row">
          <div class="col-sm-2 col-sm-offset-1">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
          <div class="col-sm-2">
            ..
          </div>
     </div>  
</div>

http://www.bootply.com/GtXXrcUa5Q

Other options for getting five column layout are described in this answer

Bootstrap 4 - 5 columns

---

Related Topics