How to make a custom Bootstrap Grid-Twitter bootstrap

nOmi
August 10, 2018
130 views
2 votes
3 Answers

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

Answers

- SebastianBrosch
- August 10, 2018 at 12:54 pm
- 0 votes
0
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">  <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.
Login or Signup to reply.

- JeroenSmink
- August 10, 2018 at 12:55 pm
- 0 votes
0
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
Login or Signup to reply.

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>

Please signup or login to give your own answer.

Click here to cancel reply.