prevent wrapping/stacking of columns in bootstrap when shrinking the size?

Question

I want to prevent the stacking of col-md-8 on col-md-4 using "nowrap" or any other alternative in the same way i did for the (Unordered list).

Below is my snippet and i have also mentioned the classes of each box with colors.

Thank you.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
  #outside-container {
    border: 2px solid red;
    height: 500px;
    white-space: nowrap;
  }
  #container1 {
    border: 2px solid green;
    height: 300px;
  }
  #colmd8 {
    border: 2px solid yellow;
    height: 400px;
  }
  #row1 {
    border: 2px solid pink;
  }
  #list1 {
    border: 2px solid red;
    width: 200px;
    height: 200px;
  }
  #container2 {
    border: 2px solid navy;
    height: 300px;
  }
  li {
    display: inline-block;
  }
  ul {
    white-space: nowrap;
  }
  #col4 {
    border: 2px groove darksalmon;
  }
</style>

<body>

  <div class="container-fluid" id="outside-container">
    <div class="col-md-8" id="colmd8">colmd8
      <div class="container-fluid" id="container1">container1
        <div class="row" id="row1">row1
          <ul class="col-md-12 list-inline" id="colmd3" style="list-style: none">
            <li id="list1">
              <a href="#"></a>
            </li>
            <li id="list1">
              <a href="#"></a>
            </li>
            <li id="list1">
              <a href="#"></a>
            </li>
            <li id="list1">
              <a href="#"></a>
            </li>

          </ul>
        </div>
      </div>

    </div>
    <div class="col-md-4" id="col4">colmd4
      <div class="container-fluid" id="container2">container2


      </div>
    </div>
  </div>

</body>

bootply

Mike · Accepted Answer · 2020-05-20 03:58:12Z

29

The flex-nowrap class on the row worked for me in 2020:

<form class="row flex-nowrap">
...
</form>

Ref: Bootstrap 4 - no column wrapping

answered May 20, 2020 at 3:58

Mike

1,00513 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

0x5929 Over a year ago

works for me in 2023, bootstrapv5.1

Banzay · Accepted Answer · 2017-01-30 19:09:49Z

I think you need to replace col-md-8 with col-xs-8 and col-md-4 with col-xs-4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta class="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
  #outside-container {
    border: 2px solid red;
    height: 500px;
    white-space: nowrap;
  }
  #container1 {
    border: 2px solid green;
    height: 300px;
  }
  #colmd8 {
    border: 2px solid yellow;
    height: 400px;
  }
  #row1 {
    border: 2px solid pink;
  }
  #list1 {
    border: 2px solid red;
    width: 200px;
    height: 200px;
  }
  #container2 {
    border: 2px solid navy;
    height: 300px;
  }
  li {
    display: inline-block;
  }
  ul {
    white-space: nowrap;
  }
  #col4 {
    border: 2px groove darksalmon;
  }
</style>

<body>

  <div class="container-fluid" id="outside-container">
    <div class="col-xs-8" id="colmd8">colmd8
      <div class="container-fluid" id="container1">container1
        <div class="row" id="row1">row1
          <ul class="col-md-12 list-inline" id="colmd3" style="list-style: none">
            <li id="list1">
              <a href="#"></a>
            </li>
            <li id="list1">
              <a href="#"></a>
            </li>
            <li id="list1">
              <a href="#"></a>
            </li>
            <li id="list1">
              <a href="#"></a>
            </li>

          </ul>
        </div>
      </div>

    </div>
    <div class="col-xs-4" id="col4">colmd4
      <div class="container-fluid" id="container2">container2


      </div>
    </div>
  </div>

</body>

</html>

Jordan.J.D · Accepted Answer · 2017-01-30 19:08:45Z

7

With bootstrap you want to develop using the smallest device in mind first. This means to use xs on your columns. If you change md to xs your columns should no longer wrap on a smaller device:

bootply

This is an excerpt from bootstrap grid documentation

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

Meaning you can combine media queries together such as .col-xs-12 .col-md-8

answered Jan 30, 2017 at 19:08

Jordan.J.D

8,12111 gold badges51 silver badges80 bronze badges

Collectives™ on Stack Overflow

prevent wrapping/stacking of columns in bootstrap when shrinking the size?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related