three columns in large screen 2 columns in tablet

Question

the problem is that I have 3 columns per row and in tablet size I want 2 columns per row is that even possible because it just get three columns per row in tablet size.

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col">

        </div>
        <div class="col-lg-4 col-md-6 col">

        </div>
        <div class="col-lg-4 col-md-6 col">

        </div>
    </div>
    <!--2nd row-->
    <div class="row">
        <div class="col-lg-4 col-md-6 col">
            <div class="card text-secondary">
                <img src="balinese.jpg" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Balinese Cat</h4>
                    <h5 class="card-text">The Balinese is a long-haired breed of domestic cat with Siamese-style point coloration and sapphire-blue eyes</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col">
            <div class="card text-secondary">
                <img src="manxs.jpg" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Manx Cat</h4>
                    <h5 class="card-text">The Manx cat is a breed of domestic cat (Felis catus) originating on the Isle of Man, with a naturally occurring mutation that shortens the tail</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col">
            <div class="card text-secondary">
                <img src="Sphynx.jpg" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Sphynx Cat</h4>
                    <h5 class="card-text">The Sphynx cat is a breed of cat known for its lack of coat (fur). It was developed through selective breeding, starting in the 1960s. The skin should have the texture of chamois, as it has fine hairs</h5>
                </div>
            </div>
        </div>
    </div>
</div>

score 0 · Answer 1 · answered Feb 23 '18 at 09:39

0

You can add the class col-sm-2 for tablet size as below

<div class="col-md-6 col-sm-2"> Some Text </div>
<div class="col-md-6 col-sm-2"> Some Text </div>
<div class="col-md-6 col-sm-2"> Some Text </div>

This will display two columns in tablet view.

answered Feb 23 '18 at 09:39

user8063037

161
1
1
8

score 0 · Answer 2 · answered Feb 23 '18 at 09:57

Just remove the col parts from your column classes and that's it.

On tablets (md screens), this will give you 2 columns per row and on screens that are smaller than md they will stack up on top of each other. And of course, on screens that are large (lg) or larger, you'll still have 3 columns per row.

Click "run code snippet" below and expand to full page for testing:

<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">
    <div class="row">
        <div class="col-lg-4 col-md-6">
        col 1
        </div>
        <div class="col-lg-4 col-md-6">
        col 2
        </div>
        <div class="col-lg-4 col-md-6">
        col 3
        </div>
    </div>
    <!--2nd row-->
    <div class="row">
        <div class="col-lg-4 col-md-6">
            <div class="card text-secondary">
                <img src="https://placeimg.com/800/400/animals" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Balinese Cat</h4>
                    <h5 class="card-text">The Balinese is a long-haired breed of domestic cat with Siamese-style point coloration and sapphire-blue eyes</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card text-secondary">
                <img src="https://placeimg.com/800/400/animals" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Manx Cat</h4>
                    <h5 class="card-text">The Manx cat is a breed of domestic cat (Felis catus) originating on the Isle of Man, with a naturally occurring mutation that shortens the tail</h5>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-6">
            <div class="card text-secondary">
                <img src="https://placeimg.com/800/400/animals" class="img-fluid card-img-top"/>
                <div class="card-body">
                    <h4 class="card-title">Sphynx Cat</h4>
                    <h5 class="card-text">The Sphynx cat is a breed of cat known for its lack of coat (fur). It was developed through selective breeding, starting in the 1960s. The skin should have the texture of chamois, as it has fine hairs</h5>
                </div>
            </div>
        </div>
    </div>
</div>

Of course, there will be space. What did you expect? Do you want the third column to completely disappear on `md` screens? Or what is supposed to happen with the third column on `md` screens? You never specified that. — WebDevBooster, Feb 23 '18 at 10:55
what i want is the column will move to the next column in md screen — beynDestroyer, Feb 23 '18 at 11:19
Mate, you gotta learn to describe things. Because right now I have no idea what you mean... — WebDevBooster, Feb 23 '18 at 11:22

Carol Skelly · Answer 3 · 2018-03-05T12:40:54.700

This question is a good demonstation of why it's often necessary to have more than 12 col- units in a row. As you can see, using separate rows is preventing the responsive layout you want.

Use a single .row div for all of the columns.

https://www.codeply.com/go/uaQYUjFkd3

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
              <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
              <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col py-2">
            <div class="card text-secondary h-100">
                ..
            </div>
        </div>
    </div>
</div>

In Bootstrap, this is known as Column Wrapping. From the docs:

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Note: I also add h-100 to make each card fill the height of the column, and py-2 to provide a little vertical padding (spacing between the columns).

Related question:
Bootstrap 3 - More than 12 columns in a row

three columns in large screen 2 columns in tablet

3 Answers3