How to Set Bootstrap Col for Small Display Sizes

How to set bootstrap col for small display sizes?

<div>
    <div class="col-md-5 col-sm-5 col-xs-5"></div>
    <div class="col-md-7 col-sm-7 col-xs-7"></div>
</div>

You have to declare the size of your col for the @media less than medium

Extra small devices Phones (<768px) - col-xs-*

Small devices Tablets (≥768px) - col-sm-*

Medium devices Desktops (≥992px) - col-md-*

Large devices Desktops (≥1200px) - col-lg-*

How can I change Bootstrap columns sizing based on screen size?

use col-x instead of col-xs-x. It was depreciated on bootstrap 4.

  <div class="row">
    <div class="col-4 col-sm-2">1</div>
    <div class="col-4 col-sm-2">2</div>
    <div class="col-4 col-sm-2">3</div>
    <div class="col-4 col-sm-2">4</div>
    <div class="col-4 col-sm-2">5</div>
    <div class="col-4 col-sm-2">6</div>
  </div>

How to change the order of 3 bootstrap columns at small screen size using push and pull?

In this case start from mobile

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="row">  <div class="col-sm-12 col-md-4" style="border:solid 1 px black;">1</div>  <div class="col-sm-12 col-md-4 col-md-push-4" style="border:solid 1 px black;">3</div>  <div class="col-sm-12 col-md-4 col-md-pull-4" style="border:solid 1 px black;">2</div> </div>

How to set Push/pull columns for Only smaller screen sizes in Bootstrap

You need to use *-push-0 and *-pull-0 to tell Bootstrap not to use push/pull on md and lg. Also I removed the lg since md alone will work in your case.
1-2-3 on large, 1-3-2 on mobile.

<div class="col-md-4 col-sm-12 col-xs-12">1</div>
<div class="col-md-5 col-md-push-0 col-sm-6 col-sm-push-6 col-xs-12">2</div>
<div class="col-md-3 col-md-pull-0 col-sm-6 col-sm-pull-6 col-xs-12">3</div>

Demo: http://www.bootply.com/PPTzE3ONur

Bootstrap columns for extra small screen size devices

Clear floats (with the .clearfix class) at specific breakpoints to
prevent strange wrapping with uneven content:

In the Bootstrap documentation for the grid system they advise you to add a new div in between the columns to help it understand where the columns should clear. The div should have a clearfix class so the columns clear to the left and one of the helper classes so you can target a specific viewport.

LIVE DEMO

and add this between the two parts :

• you need to add a clearfix <div class="clearfix visible-xs "></div> to avoid this issue in xs devises

Like so :

<nav class="page-footer-nav row">
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>

    <div class="clearfix visible-xs"></div> // < --- add this to fix the issue

      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3 ">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
      <div class="footer-nav-section col-xs-6 col-sm-4 col-md-3 ">
        <a href="">Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
        <a href="">Sub Menu Item</a>
      </div>
    </nav>

Bootstrap columns not appearing on smaller screens

The issue is you are using col without row.

When ever you need to use column there must be some row as its parent its define in official doc of Bootstrap

.card{  margin-top: 16px;  margin-left: 16px;
}
.card-body{    padding:4px;}
.card1{height: calc(50% - 16px)}
.divh{height: calc(16.7% - 16px);    margin-top: 16px;}
.card2{width: calc(50% - 16px);margin-top:0px;height:100%;}
.card4{width: calc(25% - 16px);margin-top:0px;height:100%;}
.cardall{  height: calc(100% - 16px)
}
.customcol{  padding-left: 0;  padding-right: 0;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container-fluid" style="padding-left:0; height: 98vh;"><div class="row">  <div class="col-md-4 col-sm-12 customcol"><div class="card card1">  <div class="card-body">    <p class="card-text">1asdas</p>  </div></div><div class="divh" style="justify-content: flex-start; display: flex">  <div class="card card2" >  <div class="card-body">    <p class="card-text">2aasasddsd</p>  </div></div><div class="card card2">  <div class="card-body">    <p class="card-text">3asd</p>  </div></div></div><div class="divh" style="justify-content: flex-start; display: flex">  <div class="card card2">  <div class="card-body">    <p class="card-text">4asdasd</p>  </div></div><div class="card card2">  <div class="card-body">    <p class="card-text">5asda</p>  </div></div></div><div class="divh" style="justify-content: flex-start; display: flex">  <div class="card card4" style="height:100%">  <div class="card-body">    <p class="card-text">6asda</p>  </div></div><div class="card card4" style="height:100%">  <div class="card-body">    <p class="card-text">7asd</p>  </div></div><div class="card card4" style="height:100%">  <div class="card-body">    <p class="card-text">8asdasd</p>  </div></div><div class="card card4" style="height:100%">  <div class="card-body">    <p class="card-text">9asdsad</p>  </div></div></div>  </div>  <div class="col-md-4 col-sm-12 customcol"><div class="card card1">  <div class="card-body">    <p class="card-text">10asd</p>  </div></div><div class="card card1">  <div class="card-body">    <p class="card-text">11asdas</p>  </div></div>
  </div>  <div class="col-md-4 col-sm-12 customcol">  <div class="card cardall">  <div class="card-body">    <p class="card-text">12asd</p>  </div></div>  </div></div></div>

Bootstrap 4 - Column to row on small display

I think, the simplest possible markup is the one below. It also uses the Order classes, but instead of setting the order of every button explicitly, this one touches just the "extra" buttons in the last column with .order-last .order-sm-0.

<div class="container">    <div class="row justify-content-center">        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">1</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">2</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">3</button>
        <button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">X</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">4</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">5</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">6</button>
        <button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">-</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">7</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">8</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">9</button>
        <button type="button" class="col-4 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">+</button>
        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">±</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">0</button>        <button type="button" class="col-4 col-sm-3 btn-lg btn-dark">.</button>                <!--        Use `col-12 col-sm-3` in case you want a full-width `=` button         In that case you could omit `.justify-content-center` at the wrapper        -->        <button type="button" class="col-12 col-sm-3 order-last order-sm-0 btn-lg btn-secondary">=</button>    </div></div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

---

Related Topics