Ein 5-Spalten-Layout mit Bootstrap 4 und 5 erstellen

Heute werden wir uns damit befassen – ein 5-Spalten-Layouts mit Bootstrap zu erstellen. Standardmäßig bietet Bootstrap ein 12-Spalten-Grid-System. Aber was ist, wenn wir ein 5-Spalten-Layout benötigen? Hier sehen Sie, wie man es macht.

Bootstrap 4:

Zuerst fügen wir unsere spezialisierten CSS-Klassen hinzu:

/* Stellen Sie sicher, dass diese Klasse nach der Einbindung der Bootstrap-CSS zur Verfügung steht */
.col-2-5, 
.col-sm-2-5, 
.col-md-2-5, 
.col-lg-2-5, 
.col-xl-2-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
  .col-sm-2-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 768px) {
  .col-md-2-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) {
  .col-lg-2-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 1200px) {
  .col-xl-2-5 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

Falls SCSS verwendet wird, sieht der Code so aus (basierend auf den hier nochmals angegebenen $grid-breakpoints)

$grid-breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@each $breakpoint in map-keys($grid-breakpoints) {
  .col-#{$breakpoint}-2-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;

    @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
      flex: 0 0 20%;
      max-width: 20%;
    }
  }
}

Jetzt können wir diese Klassen in unserem HTML verwenden:

<div class="row">
  <div class="col-lg-2-5">Spalte 1</div>
  <div class="col-lg-2-5">Spalte 2</div>
  <div class="col-lg-2-5">Spalte 3</div>
  <div class="col-lg-2-5">Spalte 4</div>
  <div class="col-lg-2-5">Spalte 5</div>
</div>

Bootstrap 5:

Für Bootstrap 5 fügen wir die gleiche Klasse oben und eine zusätzliche für XXL-Größen hinzu:

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.col-2-5, 
.col-sm-2-5, 
.col-md-2-5, 
.col-lg-2-5, 
.col-xl-2-5, 
.col-xxl-2-5 {
  flex: 0 0 auto;
  width: 20%;
}

@media (min-width: 576px) {
  .col-sm-2-5 {
    flex: 0 0 auto;
    width: 20%;
  }
}

@media (min-width: 768px) {
  .col-md-2-5 {
    flex: 0 0 auto;
    width: 20%;
  }
}

@media (min-width: 992px) {
  .col-lg-2-5 {
    flex: 0 0 auto;
    width: 20%;
  }
}

@media (min-width: 1200px) {
  .col-xl-2-5 {
    flex: 0 0 auto;
    width: 20%;
  }
}

@media (min-width: 1400px) {
  .col-xxl-2-5 {
    flex: 0 0 auto;
    width: 20%;
  }
}

Hier noch der Code für SCSS

$grid-breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

@each $breakpoint in map-keys($grid-breakpoints) {
  .col-#{$breakpoint}-2-5 {
    flex: 0 0 auto;
    width: 20%;

    @media (min-width: map-get($grid-breakpoints, $breakpoint)) {
      flex: 0 0 auto;
      width: 20%;
    }
  }
}

Mit diesen CSS-Stilen können wir ganz einfach ein 5-Spalten-Layout mit Bootstrap erstellen. Erweitern Sie Ihr Webdesign mit diesem einfachen Trick!

Das 5-Spalten-Layout mit Bootstrap

---