Bootstrap Minimum Width Grid

min-width for column in Bootstrap grid system

Not sure if there is such a way to accomplish what you want.

The col-sm-x defines specific width percentages of your viewport, and if you provide custom values, then the accumulated width of all columns will either be more or less than 100%, which is not the desired behaviour.

Instead, you can provide multiple classes for the same div. Example:

<div class="row">
  <div class="col-sm-4 col-xs-1">Name</div>
  <div class="col-sm-1 col-xs-3">Instance name</div>
  <div class="col-sm-7 col-xs-2">Due date</div>
</div>

If this is solution does not suffice, then you will most likely come up with a javascript solution of some sort that manually sets the width of the other divs.

There seems to be another, similar question previously posted here on stackoverflow. Have a look here.

Bootstrap Grid on W3Schools

Bootstrap 4: Min-width only for one column

Simplest way is to use an auto-layout column (.col) on the right...

<section class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-5 min-width-460-md border">
            <table class="table table-striped">
                ..
            </table>
        </div>
        <div class="col bg-dark text-white">
            Second column (it contains more resizable data, so no min-width required here).
        </div>
    </div>
</section>

Demo: https://www.codeply.com/go/IB5xTytQAq

How to set minimum width for Cards in Bootstrap?

<div class="container" style="margin-top:3em;">
  <div class="card-columns custom-columns">
    <div class="card">
      <img src="images/nasoclearSalineNasalSpray.png" class="card-img-top" style="max-height:500px;"alt="images">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img src="images/pedialytePowder.png" class="card-img-top" style="max-height:500px;" alt="images">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <div class="card">
      <img src="images/chericofSuspension.png" class="card-img-top" style="max-height:500px;"alt="images">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

removed width min-width:300px;

Added .custom-columns

    @media (max-width: 700px) {
        .card-columns.custom-columns {
            column-count: 1;
        }
    }
    @media (min-width: 700px) {
        .card-columns.custom-columns {
            column-count: 2;
        }
    }
    @media (min-width: 1000px) {
        .card-columns.custom-columns {
            column-count: 3;
        }
    }
    @media (min-width: 1400px) {
        .card-columns.custom-columns {
            column-count: 4;
        }
    }

Sample Image

What is the class for min width using Bootstrap 5?

  • Bootstrap CSS Grid layout does the heavy lifting in terms of setting responsive breakpoints.

  • Each view/page/front-end element can be divided into 12 parts. and you can choose how much space a container takes out of 12 vertical columns.

  • Bootstrap 5 gives you 6 breakpoints pre-defined, with the following syntax

    col-xs-{number-between-1-to-12}  width <= 540px
    col-sm-{number-between-1-to-12}  max-width = 540px
    col-md-{number-between-1-to-12}  max-width = 720px
    col-lg-{number-between-1-to-12}  max-width = 960px
    col-xl-{number-between-1-to-12}  max-width = 1140px
    col-xxl-{number-between-1-to-12} width <= 1400px

Example 1: You get a parent div with 2 child divs, these children will take equal divided space inside for all screen sizes

<div id="i-am-a-parent-div"> 
    
   <div class="col-6"> This takes First Half the Space inside parent element</div>

   <div class="col-6"> This takes Second Half the Space inside parent element</div>

</div>

Example 2: The Children divs will share 6/12 space each till max-width=540, but then they will change space occupation to 4/12 and 8/12 respectively.
NOTE: I've added two separated classes for each child div, you can add as many as needed for each breakpoint.

<div>
    <div class="col-sm-6 col-md-4"> This takes First Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take One-Thirds (4/12) the space between 540px & 768px </div>
    
    <div class="col-sm-6 col-md-8"> This takes Second Half (6/12) the Space inside parent element till max-width = 540px,
      BUT it will only take Two-Thirds (8/12) the space between 540px & 768px </div>
</div>

If this doesnt satisfy what you need to do, Then there are more customization options to their breakpoints, Feel free to checkout: https://v5.getbootstrap.com/docs/5.0/layout/grid/#grid-options

Let me know if this helps you out!

Bootstrap grid breaks in smallest size

The columns can't shrink in width less than 30px (due to padding) so, as screen width narrows, eventually the columns wrap (stack vertically). To prevent this, adjust the padding on the columns inside the row. Bootstrap 4 has a no-gutters class for this purpose...

https://codeply.com/go/XaBsD5AhJG

<div class="container">
    <div class="row no-gutters">
        <label class="col-2 col-form-label">Email</label>
        <div class="col-8">
            <input type="text" class="form-control">
        </div>
        <div class="col-2 pl-1">
            text
        </div>
    </div>
</div>

Bootstrap 4 also has padding utility classes classes that can be used to adjust padding on individual elements. For example, I used pl-1(padding-left) on the last column to give a little space between the input and "text". Another Bootstrap 4 option is to use flex-nowrap on the row which will prevent wrapping and creating horizontal scrolling when there is overflow.

In Bootstrap 3, you need to add CSS to adjust the padding.

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.no-gutters>[class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

Related
Bootstrap col-xs wrapping

Bootstrap xs columns wrap

Min-Width and Initial-Scale in Bootstrap

As I suggested in the comment, you can use a responsive image in bootstrap. See this link:http://getbootstrap.com/css/#images-responsive

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

How to Create Circle with Four Quarters

Javafx Text Styling for Dynamic Objects

Preventing Browser Text Input Suggestions

How to Center Text Inside an Svg Path

Firefox Support for Alignment-Baseline Property

Placeholder Attribute on Input Tags for Ie

Single Versus Double Quotation Marks in HTML & CSS

What Tag Should I Use Instead of Deprecated Tag Font in HTML (Cannot Use CSS)

Zooming on a Point with CSS3 Transform Scale

What Browsers Support CSS #Parent > .Direct-Child Notation? (No Jquery)

What Does 14Px/26Px Font Size in CSS Do

Skew One Corner of Image

How to Find "Emulate CSS Media" in Google Chrome

How to Put Text in the Upper Right, or Lower Right Corner of a "Box" Using CSS

CSS Performance Between Class and Attribute Selectors

Can You Add New CSS Properties in Chrome Inspector

Target First Element of Div Using CSS

CSS - Rowspan Like Effect


Leave a reply



Submit