Home Bootstrap4: Displaying 3 columns in two rows on narrow screens
Reply: 2

Bootstrap4: Displaying 3 columns in two rows on narrow screens

Udi
1#
Udi Published in 2018-02-14 08:53:26Z

I would like to create a pagination component that would look like this:

On a wide screen:

|                                                       | 
| [<<]                Page # 1 of 6                [>>] |
|                                                       | 

On a narrow screen:

|                      |
|    Page # 1 of 6     | 
| [<<]            [>>] |
|                      |

I have tried the following:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xs-12 order-md-2 order-xs-1 text-center">
      blah blah blah [B]
    </div>
    <div class="col-md-3 col-xs-6 order-md-1 order-xs-2 text-left">
      &laquo;&laquo;&laquo; [A]
    </div>
    <div class="col-md-3 col-xs-6 order-md-3 order-xs-3 text-right">
      &raquo;&raquo;&raquo; [C]
    </div>
  </div>
</div>

Codepen: https://codepen.io/nonZero/pen/XZaxBR

But on a narrow screen I get this instead:

|                      |
|    Page # 1 of 6     | 
| [<<]                 |
|                 [>>] |
|                      |

(Edit: fixed xs-12 and xs-6 were mixed in the original post, but the question is still open.)

WebDevBooster
2#
WebDevBooster Reply to 2018-02-14 10:03:21Z

There are NO col-xs-* classes in Bootstrap 4 (anymore). They have been replaced with just col-*:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-md-6 text-center">
            blah blah blah [B]
        </div>
        <div class="col-6 col-md-3 order-md-first">
            &laquo;&laquo;&laquo; [A]
        </div>
        <div class="col-6 col-md-3 text-right">
            &raquo;&raquo;&raquo; [C]
        </div>
    </div>
</div>

(Notice: text-left is unnecessary because that's the default.)

Also, the use of the order-first class allows to do away with the order-1 and order-2 classes.

Shahil M
3#
Shahil M Reply to 2018-02-14 09:34:12Z

Updated - col-xs-* have been dropped in Bootstrap 4. Use col-* instead.

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-6  order-md-2 order-xs-1 text-center">
      blah blah blah [B]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-1 order-xs-2 text-left">
      &laquo;&laquo;&laquo; [A]
    </div>
    <div class="col-sm-6 col-md-3 col-6 order-md-3 order-xs-3 text-right">
      &raquo;&raquo;&raquo; [C]
    </div>
  </div>
</div>

Demo : https://codepen.io/anon/pen/PQKxOZ

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.324147 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO