Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 - Column to row on small display

Have a grid with 4 columns and 4 rows. What I want to happen is on a small display the 4th column becomes a 5th row on a small display vs the column that it is on a medium+ display. It's a pet project to try and understand the bootstrap grid layout better. I'm essentially making a responsive calculator for the practice. I feel like I could do this with just raw CSS but figured bootstrap had to have some utilities that would make this easier. Images for example.

Large format:

enter image description here

Small format:

enter image description here

I have a start for the markup. There is some more associated CSS but I don't think it's important in the example. I've had a few versions but this is where I'm at in the moment.

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">1</button>
        <button type="button" class="btn-lg btn-outline-dark">2</button>
        <button type="button" class="btn-lg btn-outline-dark">3</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">4</button>
        <button type="button" class="btn-lg btn-outline-dark">5</button>
        <button type="button" class="btn-lg btn-outline-dark">6</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">7</button>
        <button type="button" class="btn-lg btn-outline-dark">8</button>
        <button type="button" class="btn-lg btn-outline-dark">9</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-light">&plusmn;</button>
        <button type="button" class="btn-lg btn-outline-dark">0</button>
        <button type="button" class="btn-lg btn-outline-light">.</button>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">X</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">-</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">+</button>
      </div>
      <div class="row">
        <button type="button" class="btn-lg btn-outline-dark">=</button>
      </div>
    </div>
  </div>
</div>

EDIT: I can only pick one solution as an answer but kiranvj, WebDevBooster, and dferenc all provided Bootstrap 4 release version working solutions. I can only mark one as an answer. No slight to the rest of you guys. My hands are tied.

like image 384
Rig Avatar asked Jan 27 '18 02:01

Rig


People also ask

How to split columns 25%/75% for small devices in Bootstrap?

Assume we have a simple layout with two columns. We want the columns to be split 25%/75% for small devices. Small devices are defined as having a screen width from 576 pixels to 767 pixels. For small devices we will use the .col-sm-* classes. Now Bootstrap is going to say "at the small size, look for classes with -sm- in them and use those".

How to create equal width columns in Bootstrap 4?

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-* and only use the .col class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width: <!-- Two columns: 50% width--> <!-- Four columns: 25% width-->

How to add multiple columns to a bootstrap page?

Or let Bootstrap automatically handle the layout --> First example: create a row ( <div class="row"> ). Then, add the desired number of columns (tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should always add up to 12 for each row.

How many columns can a Bootstrap 4 grid have?

Bootstrap 4 Grid System. Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 column individually, you can group the columns together to create wider columns:


3 Answers

I would do something like this. Check in full screen mode and resize to small

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row text-center">
  <div class="col-12 col-sm-8">
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
    <div class="row">
      <div class="col-4">black</div>
      <div class="col-4">black</div>
      <div class="col-4">black</div>
    </div>
  </div>
  <div class="col-12 col-sm-4 text-danger">
    <div class="row">
      	<div class="col-4 col-sm-12">pink</div>
      	<div class="col-4 col-sm-12">pink</div>
      	<div class="col-4 col-sm-12">pink</div>
    </div>
  </div>
</div>
like image 65
kiranvj Avatar answered Sep 23 '22 23:09

kiranvj


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">&plusmn;</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"/>
like image 35
dferenc Avatar answered Sep 22 '22 23:09

dferenc


What I would do is create 3 additional pink div elements that render below the black divs, and then hide them using the hidden-*-up and hidden-*-down classes. When the screen is small, hide the pink divs on the right and show the pink divs on the bottom, and vice versa when the screen is small.

like image 26
Marco Principio Avatar answered Sep 23 '22 23:09

Marco Principio