CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Zcarpman
Zcarpman

Reputation: 53

Bootstrap 5 img-responsive in one row

I am having a hard time getting 5 img-responsives classes in a row with bootstrap. I am new to bootstrap so I may be way off here but this is what I have right now.

HTML:

    <div class="container" id="pics" >
        <div class="row">
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/usscreenshot.png">
                    <h3> Make a real time post with your friends!</h3>


                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/mainscreenshot-01.png">
                    <h3> Discover new groups of people nearby!</h3>

                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/conversationsscreenshot-01.png">
                    <h3>Chat with interesting groups!</h3>

                </div>
            </div>
            <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/eventscreenshot-01.png">
                    <h3>Find cool places to go!</h3>

                </div>


            </div>
             <div class="col-lg-3 col-md-6 text-center">
                <div class="service-box">
                    <img class="img-responsive" src="img/eventscreenshot-01.png">
                    <h3>Find cool places to go!</h3>

                </div>


            </div>
        </div>
    </div>
</section>

I can get 4 img's in a nice row with proper spacing and it seems I have plenty of margin on either side for one more. I would like all 5 img's to be on one row and to all be responsive?

As far as mobile goes, I would only need 1 column scroll of all 5 images, I can get that to work just fine with what I have.

Thanks for any help.

Upvotes: 2

Views: 2577

Answers (1)

Nakib
Nakib

Reputation: 4713

You are using col-md-3 which will separate row in 4 equal column and the last column will move to next line instead set offset of 1 column and make each column of 2 point like col-md-2

<div class="container" id="pics" >
    <div class="row">
        <div class="col-md-2 col-md-offset-1 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/usscreenshot.png">
                <h3> Make a real time post with your friends!</h3>


            </div>
        </div>
        <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/mainscreenshot-01.png">
                <h3> Discover new groups of people nearby!</h3>

            </div>
        </div>
        <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/conversationsscreenshot-01.png">
                <h3>Chat with interesting groups!</h3>

            </div>
        </div>
        <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/eventscreenshot-01.png">
                <h3>Find cool places to go!</h3>

            </div>


        </div>
         <div class="col-md-2 text-center">
            <div class="service-box">
                <img class="img-responsive" src="img/eventscreenshot-01.png">
                <h3>Find cool places to go!</h3>

            </div>


        </div>
    </div>
</div>

Upvotes: 1

Related Questions