Bootstrap Grid Columns Not Stacking

Bootstrap columns are not stacking on small/mobile screen

You have to understand Bootstrap Strategy

You have to tell your HTML page that "for desktop you want 3 column ,for tab you want 2or 3,for mobile you want 1 col" via bootstarp predefine classes

Extra Small Phones Less than 768px :.col-xs-$
Small Devices Tablets 768px and Up :.col-sm-$
Medium Devices Desktops 992px and Up :.col-md-$
Large Devices Large Desktops 1200px and Up :.col-lg-$

The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.
http://getbootstrap.com/css/#grid

There is class like col-xs-1......col-xs-12,col-md-1......col-md-12,col-lg-1......col-lg-12

means its divided into 12 column if you want 4 column based layout then use number-3

"Col-xs-3"
col stands for column
xs stands for extra small screen means mobile
-3 stands for 4 column "(12/4) =3"

 <div class="col-xs-4 col-md-4 col-lg-4">                    <figure style="background:green;height:500px;">                        <img class="img-iPhone" src="images/1t.png" alt="Sample Image">                    </figure>                   <h2>1st screen</h2>                </div>                <!-- /.col-md-4 -->
                <div class="col-xs-4 col-md-4 col-lg-4">                    <!-- Images showcase -->                    <figure style="background:blue;height:500px;">                        <img class="img-iPhone" src="images/1t.png" alt="Sample Image">                    </figure>                    <h2>2nd screen</h2>                </div>                <!-- /.col-md-4 -->
                <div class="col-xs-4 col-md-4 col-lg-4">                    <figure style="background:red;height:500px;">                        <img class="img-iPhone" src="images/1t.png" alt="Sample Image">                    </figure>                    <h2>3rd screen</h2>                </div>

Bootstrap grid not stacking

If you want them to stack as small resolutions then you need to tell Bootstrap that. What you have now says that each div should take up two columns at the smallest (xs) resolutions and above. So instead use:

<div class="col-xs-12 col-sm-2 thumbnail">

This says at the smallest resolutions make each div span all 12 columns, but on small screens (sm) and above, occupy two columns per div.

Html Bootstrap Columns stacking not side by side

The bootstrap grid system has 12 columns per row. If the total number of columns is greater than 12, then the spare columns will wrap into the next row.

In your example, for small screens you have 2 x col-sm-9 classes, which makes a total of 18 columns. For medium screens you have 2 x col-md-6 classes, which makes a total of 12 columns, so it should work fine for this screen size, each column should have the same width. For large screens you have 2 x col-lg-8 classes, which makes a total of 16 columns.

You need to decide what % of the screen you want your sidebar to take up on large screens. For example, say you want it to take 25% of the screen, then you should give col-lg-3 to the sidebar and col-lg-9 to the recipes. If you want this to be the case on all screen sizes, then use col-3 and col-9 respectively.

If you want to give 33% of the screen to you sidebar, then you should use col-lg-4 and col-lg-8 respectively.

col-lg-2and col-lg-10 will give 16.6% of the screen to the sidebar and 83.3% of the screen to the recipes.

col-md-6 for both, will give each element equal width of the screen on medium sized screens.

If you want all columns to take up equal space, you can also just use the col class on each element.

Read more on the Bootstrap docs for their Grid system.

Bootstrap 5 Grid Not Equaling 12 Column Width

You're missing a div with the row class after your container-fluid div. That will help you with your case. In Bootstrap, after a container, if you will use cols, it is best to wrap them into a row class div.

var dataSet = [
            ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
            ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
            ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
            ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
            ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
            ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
            ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
            ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"],
            ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"],
            ["Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600"],
            ["Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560"],
            ["Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000"],
            ["Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600"],
            ["Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500"],
            ["Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750"],
            ["Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500"],
            ["Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000"],
            ["Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500"],
            ["Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000"],
            ["Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500"],
            ["Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000"],
            ["Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000"],
            ["Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450"],
            ["Doris Wilder", "Sales Assistant", "Sydney", "3023", "2010/09/20", "$85,600"],
            ["Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000"],
            ["Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575"],
            ["Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650"],
            ["Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850"],
            ["Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000"],
            ["Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000"],
            ["Michelle House", "Integration Specialist", "Sydney", "2769", "2011/06/02", "$95,400"],
            ["Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500"],
            ["Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000"],
            ["Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500"],
            ["Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050"],
            ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
        ];

        $(document).ready(function () {
            $('#example').DataTable({
                data: dataSet,
                columns: [
                    { title: "Name" },
                    { title: "Position" },
                    { title: "Office" },
                    { title: "Extn." },
                    { title: "Start date" },
                    { title: "Salary" }
                ]
            });
        });
#newBTN, #updtBTN {
  background: #B3AB7D;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  margin: 0 auto;
}
#newBTN:visited, #updtBTN:visited {
  background: #B3AB7D;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  margin: 0 auto;
}

.button {
  background: #B3AB7D;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  margin: 0 auto;
}

.button:visited {
  background: #B3AB7D;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  margin: 0 auto;
}

#newBTN, #updtBTN {
  width: 300px;
}

#my-legend {
  width: 300px;
}
.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
}

.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
}

.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 18px;
  margin-bottom: 2px;
}

.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 16px;
  width: 30px;
  margin-right: 5px;
  margin-left: 0;
  border: 1px solid #999;
}

.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
}

.my-legend a {
  color: #777;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap5.min.css" />
    <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.js"></script>
    <script type="text/javascript"
        src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row my-3">
<div class="col-md-3">
  <div class="row p-3">
    <a href="#" class="button btn" id="newBTN" onclick="openDialog();">Create New Report</a>
  </div>
  <div class="row p-3">
    <a href="#" class="button btn" id="updtBTN" onclick="openEditForThisUserThisWeek();">Update Current Report</a>
  </div>
  <div class="row justify-content-center p-3">
    <div class='my-legend' id="my-legend" style="border: 1px solid black;">
      <div class='legend-title'>Color Code Values:</div>
      <div class='legend-scale'>
        <ul class='legend-labels'>
          <li><span style='background:#66b266;'></span>100 - 75 % Present</li>
          <li><span style='background:#ffff66;'></span>75 - 25 % Present</li>
          <li><span style='background:#ff6666;'></span>Less than 25% Present</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="col-md-6">
  <table id="example" class="display" width="100%"></table>
</div>
</div>
</div>
</body>
</html>

Related Topics

Break Line on White Space Between Words

How to Evenly Distribute Menu Items with CSS When Width and Quantity Is Not Known

Consistently Sizing a <Textarea> Under Ie, Ff, Safari/Chrome

Svg Rotate Path

IE9 Issue Border Radius and Linear Gradient

Two Fixed Width Full Height Columns, with Seamless Transition to Blank Space

CSS Problem to Make 2 Divs Float Side by Side

How to Use Commas in a CSS Variable Fallback

Lesscss Stops Processing Styles

Zoom Out Shiny App at Default in Browser

Div's in Two Columns

Adding Class to Editorfor in MVC

Create Clip-Path Wave CSS Edges

Why Bootstrap 3 Navbar Dropdown Doesn't Work in IE8

CSS Transition on an Initially Hidden Elemement

CSS Variables - Swapping Values

Bootstrap: Fixed Gutter Width in Fluid Layout

Print Contents of a Modal Popup


Leave a reply



Submit