How to make a custom Bootstrap Grid

Question

I need to make a bootstrap grid for my image section. But I can not figure out how to do this as I am new to web development. Can some body please help me in achieving the following grid?

In the large screens I want to show 6 columns but on the mobile devices I want to show 2 columns in a row.

So far I have tried the following code with no success. It does make the large screen columns to 6 but on mobile devices it only shows 1 column.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-sm-8">
    <div class="row" id="pwd-container1">
        <div class="col-sm-12">
             <div class="form-group">
                  <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-2 col-sm-8">
        <div class="row" id="pwd-container1">
            <div class="col-sm-12">
                <div class="form-group">
                    <label for="sc_name">City name</label>
                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                </div>
            </div>
        </div>
    </div>
</div>

Yes that's not a image display section rather its form but once i figure out the layout i will use the structure to display my images.

Any help is much appreciated. Thanks

in bootstrap 4 for extra small screen col-6 instead of col-xs-6 — Vinay, Aug 10 '18 at 10:52

Sebastian Brosch · Answer 1 · 2018-08-10T11:22:16.367

You can use col-6 as default column size for all device sizes. With col-md-2 you can set the width of the columns on medium and above devices sizes so 6 columns are visible in one row.

see the following example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">

    <!-- width < 768px 2 column / width >= 768px 6 columns -->
    <div class="col-6 col-md-2">column1</div>
    <div class="col-6 col-md-2">column2</div>
    <div class="col-6 col-md-2">column3</div>
    <div class="col-6 col-md-2">column4</div>
    <div class="col-6 col-md-2">column5</div>
    <div class="col-6 col-md-2">column6</div>
  </div>
</div>

You only saw one column on the mobile device because you only specified the columns on small devices and above. mobile devices can be smaller than small (col-xs-* or col-*).

Note: You don't need to set the col-* classes for every size. You can only set the col-* classes where the number of columns should change. I recommend to set the default (col-*) and overwrite on the larger size (col-sm-*, col-md-*, col-lg-*, col-xl-*) if needed.

You can find more information about the different sizes on the Bootstrap documentation.

score 1 · Answer 2 · answered Aug 10 '18 at 11:15

The Bootstrap 4 grid system has five classes

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

Bootstrap grid system can have up to 12 columns.

so if you want three columns in one row you can write

.col-sm-4 or col-md-4 etc.

depending on your screen size or how many columns you want in one row.

so you should write

            <div class="col-6 col-sm-6 col-md-4 col-lg-2">
                <div class="row" id="pwd-container1">
                        <div class="col-sm-12">
                             <div class="form-group">
                                  <label for="sc_name">City name</label>
                                    <input type="text" class="form-control example1" id="sc_name" name="sc_name" placeholder="City name" value="" required="">
                                </div>
                            </div>
                        </div>
                    </div>

score 0 · Answer 3 · edited Jan 30 '19 at 11:03

In bootstrap you can use the following media queries

col-sm- : For small devices like smartphones
col-md- : For medium size devices for example a tablet
col-lg- : For desktop size screens
col-xl- : For even bigger screens than a normale desktop

As bootstrap used 12 colums for 1 row you and you want 6 colums on desktop and 2 on mobile you could do the following

col-2 col-sm-6

12/2 = 6 so 6 columns for desktop 12/6 = 2 so 2 columns for mobile

How to make a custom Bootstrap Grid

3 Answers3