Increase columns from 12 to 16 at largest screen size

Question

For a project I need to have 7 or 8 columns depending on requirement for largest screen size in bootstrap 4 i.e greater than 1200px. For lower than 1200px 12 columns work perfect.

Is it possible to have more than 12 columns by changing default bootstrap css only for large screens.

Do the answers to this previous question give you what you need? https://stackoverflow.com/questions/46258947/how-to-get-bootstrap-4-24-grid — Rich DeBourke, Mar 14 '21 at 22:41
as per this answer it will increase columns for all screen sizes while the project I am working on needs to increase columns only for large screens. — A.J, Mar 15 '21 at 00:25

Rich DeBourke · Answer 1 · 2021-03-15T02:04:19.477

You wouldn’t be able to have two sets of CSS rules, one for smaller screens and one for larger screens as you would need to tell the browser how to display a col-18 on smaller screens.

You could create a custom CSS file by changing the value of $grid-columns in the _variables.scss from 12 to 18 and compiling your own, custom CSS file, and then use the normal Bootstrap method to have the columns do something different on smaller screens.

Using the current 12 column grid as an example, you could define 12 (or 18) columns for a large screen, while the same columns are defined as 2 or 3 wide for a smaller screen. That would cause the second group of columns to wrap below the first on a smaller screen.

You could just hide the extra columns on smaller screens, if the data isn’t important.

Here’s a quick example of wrapping or hiding columns using a 12 column grid:

.row-1 p {
  background-color: lavender;
}
.row-2 p {
  background-color: lightpink;
}
p {
  text-align: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<div class="container">
  <div class="row row-1">
    <div class="col-2 col-lg-1">
      <p>1</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>2</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>3</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>4</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>5</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>6</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>7</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>8</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>9</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>10</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>11</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>12</p>
    </div>
  </div>
  <div class="row row-2">
    <div class="col-2 col-lg-1">
      <p>1</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>2</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>3</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>4</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>5</p>
    </div>
    <div class="col-2 col-lg-1">
      <p>6</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>7</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>8</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>9</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>10</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>11</p>
    </div>
    <div class="d-none d-lg-block col-lg-1">
      <p>12</p>
    </div>
  </div>
</div>

You could also use the standard grid layout and define three columns on a wide screen, and then give those columns 6 columns each (3 * 6 = 18). Those three columns could be full screen wide on smaller screens).

Increase columns from 12 to 16 at largest screen size

1 Answers1