Bootstrap 5 utilizes an 8-column system specifically designed for tablets, while defaulting to a 12-column system for both desktop and mobile versions

Question

Bootstrap 5 utilizes an 8-column system specifically designed for tablets, while defaulting to a 12-column system for both desktop and mobile versions

Currently, I am utilizing the Bootstrap grid system with its 12-column setup, which is working well. However, my designer has requested that I make the Tablet view an 8-column system, with each column taking up 100% of the width and no gutters in between.

Is this achievable? And if so, what specifications should I provide?

Attached is a screenshot illustrating the required grid system. The mobile 4-column setup is not a concern, as the default column system works fine. The challenge lies in adapting to the tablet view, especially with elements that require 3 or 5 columns - a translation to the 12-column system seems tricky in such cases.

https://i.sstatic.net/53dpF.png

css twitter-bootstrap bootstrap-5

Answer 1

Answer №1

Regrettably, achieving this layout is not feasible with the default Bootstrap Grid system. Given that Bootstrap's grid is based on a 12-column structure, creating blocks with a width of 1.5 columns each poses a challenge.

My suggestion would be to utilize CSS-Grid instead for this scenario:

:root {
  --col: 4;
}

@media only screen
  and (min-width: 786px) {
    :root {
      --col: 8;
    }
}

@media only screen
  and (min-width: 1440px) {  
    :root {
      --col: 12;
    }
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: 0.5em;
}


/* for demonstration purpose only */
.container > div {
  border: 2px dashed red;
  min-height: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

If you require support for older versions of IE and must utilize Flexbox, the following formula should be utilized:

(100% - ((columns - 1) * gap-size)) / columns

:root {
  --col: 4;
  --gap: 0.5em;
}

@media only screen
  and (min-width: 786px) {
    :root {
      --col: 8;
    }
}

@media only screen
  and (min-width: 1440px) {  
    :root {
      --col: 12;
    }
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.container > div {
  width: calc((100% - ((var(--col) - 1) * var(--gap))) / var(--col));
}


/* for demonstration purpose only */
.container > div {
  box-sizing: border-box;
  border: 2px dashed red;
  min-height: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

Answer 2

Regrettably, achieving this layout is not feasible with the default Bootstrap Grid system. Given that Bootstrap's grid is based on a 12-column structure, creating blocks with a width of 1.5 columns each poses a challenge.

My suggestion would be to utilize CSS-Grid instead for this scenario:

:root {
  --col: 4;
}

@media only screen
  and (min-width: 786px) {
    :root {
      --col: 8;
    }
}

@media only screen
  and (min-width: 1440px) {  
    :root {
      --col: 12;
    }
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--col), 1fr);
  gap: 0.5em;
}


/* for demonstration purpose only */
.container > div {
  border: 2px dashed red;
  min-height: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

If you require support for older versions of IE and must utilize Flexbox, the following formula should be utilized:

(100% - ((columns - 1) * gap-size)) / columns

:root {
  --col: 4;
  --gap: 0.5em;
}

@media only screen
  and (min-width: 786px) {
    :root {
      --col: 8;
    }
}

@media only screen
  and (min-width: 1440px) {  
    :root {
      --col: 12;
    }
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.container > div {
  width: calc((100% - ((var(--col) - 1) * var(--gap))) / var(--col));
}


/* for demonstration purpose only */
.container > div {
  box-sizing: border-box;
  border: 2px dashed red;
  min-height: 1vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

Answer 3

Answer №2

I stumbled upon a clever solution that may seem like an override, but it fits my requirements flawlessly. Below is the uncomplicated code snippet, which you can adjust the class names and media query widths to suit your specifications.

@media (min-width: 750px) and (max-width: 990px) {
    .col-8-c-1 { width: 12.5%; }
    .col-8-c-2 { width: 25%; }
    .col-8-c-3 { width: 37.5%; }
    .col-8-c-4 { width: 50%; }
    .col-8-c-5 { width: 62.5%; }
    .col-8-c-6 { width: 75%; }
    .col-8-c-7 { width: 87.5%; }
    .col-8-c-8 { width: 100%; }

    .col-8-p-0{
        padding: 0;
    }
}

Consider using HTML code similar to the following:

<div class="col-12 col-8-c-6">occupies the entire width and 6 out of 8 columns on tablets<div>

Answer 4

I stumbled upon a clever solution that may seem like an override, but it fits my requirements flawlessly. Below is the uncomplicated code snippet, which you can adjust the class names and media query widths to suit your specifications.

@media (min-width: 750px) and (max-width: 990px) {
    .col-8-c-1 { width: 12.5%; }
    .col-8-c-2 { width: 25%; }
    .col-8-c-3 { width: 37.5%; }
    .col-8-c-4 { width: 50%; }
    .col-8-c-5 { width: 62.5%; }
    .col-8-c-6 { width: 75%; }
    .col-8-c-7 { width: 87.5%; }
    .col-8-c-8 { width: 100%; }

    .col-8-p-0{
        padding: 0;
    }
}

Consider using HTML code similar to the following:

<div class="col-12 col-8-c-6">occupies the entire width and 6 out of 8 columns on tablets<div>

Bootstrap 5 utilizes an 8-column system specifically designed for tablets, while defaulting to a 12-column system for both desktop and mobile versions

Answer №1

Answer №2

Similar questions

The issue with two different link styles displaying correctly in Internet Explorer but not in other browsers is that when a link is clicked, all links appear

Incorporate JavaScript to enable the transfer of text from one textarea to another upon clicking a button, while simultaneously clearing the original textarea

WP How can I modify a particular thumbnail size with a custom CSS class?

Create an interactive table in your WordPress website that adjusts to different screen sizes

The mouse scurries away once the div height has been adjusted

Unable to alter or eliminate the grey background using material-ui

What is the proper method for changing the height of this component in HTML?

What is the reason for translate3d(…) causing a scrollbar to appear on iframes?

Create a Bootstrap multi-bar component for visually displaying the daytime information

Creating a child div that is half the size of its parent

Having trouble with hover effects not working on links due to the container? Here's a solution for you

Incorporate zoom feature into the jQuery polaroid gallery

Guide to setting up a Datetime picker in Bootstrap 5 user interface

Steps for repairing a button positioned at the top of a nested container within a form

Difficulty with the responsiveness of a website due to issues with the bootstrap grid system

Utilizing data attributes over classes for styling in CSS

Drop and drag the spotlight

Unable to get the desired 100px margin at the bottom

Encountered an error searching for module 'autoprefixer' while executing the npx tailwindcss init -p command

Tips for inserting a rotated image using CSS