CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
pcs
pcs

Reputation: 1854

Bootstrap with five images with same row

I m expecting like this image Link

In the image there 5 images and link to dotted images..

May i know, How to display with using bootstrap classes.

I just confused, can anyone help me to fix this?

Thanks,

Here is the code by using table tag:

<td class="tdbodycontent" id="workDemo">
                <div class="wrapper" style="height:340px;">
                    <table class="tblhomecontent dotted" cellpadding="0" cellspacing="0">
                        <tbody><tr>
                            <td colspan="5">
                                <div class="boxtitle">
                                    How it works</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="box5col">
                                <div class="marker_1 center">
                                </div>
                                <p class="markerContent">
                                    Sign Up for free</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_2 center">
                                </div>
                                <p class="markerContent">
                                    Select the<br>
                                    neighborhoods<br>
                                    you want to follow</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_3 center">
                                </div>
                                <p class="markerContent">
                                    Invite friends and<br>
                                    family to join</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_4 center">
                                </div>
                                <p class="markerContent">
                                    Receive important<br>
                                    alerts and information<br>
                                    from trusted sources</p>
                            </td>
                            <td class="box5col">
                                <div class="marker_5 center">
                                </div>
                                <p class="markerContent">
                                    Share information<br>
                                    with friends<br>
                                    securely</p>
                            </td>
                        </tr>
                    </tbody></table>
                </div>
            </td>

I need to convert in bootstrap, Here is the image link dotted , step-1 , step-2 , step-3 , step-4 , step-5

Upvotes: 0

Views: 3003

Answers (2)

David Stosik
David Stosik

Reputation: 879

Building on top of anu g prem's solution, and adding something for the dotted lines, plus a bit of explanations.

Live example

<div class="container">
  <div class="row steps">
    <hr class="col-xs-8 col-xs-offset-2" />

    <div class="col-xs-2 col-xs-offset-1"><img src="http://s22.postimg.org/pq17qfgwd/step_1.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/5u58avzv1/step_2.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/58g9es4st/step_3.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/576bld2z1/step_4.png" class="img-responsive"></div>
    <div class="col-xs-2"><img src="http://s22.postimg.org/g9bejsx1p/step_5.png" class="img-responsive"></div>

  </div>
</div>

.steps {
    position: relative;
}

.steps hr {
    /* Use the 3 lines below to use a dotted line image file as background of the <hr> */
    border: none;
    background: transparent url('http://s22.postimg.org/53ci53xht/dotted.png') no-repeat center center;
    height: 2px;
    /* Use the line below instead to style the <hr> with a border */
    /*border-top: 1px dashed gray;*/

    margin-top: 0;
    margin-bottom: 0;
    position: absolute;
    top: 50%;
}

.steps .img-responsive {
    margin: 0 auto;
}

You'll notice I did not use your dotted line, and instead used an <hr>, and styled its border-top with a dashed line. (Edit: but op wants to use the image he provided, see comments.)

To answer your question regarding the number of columns (10 vs Bootstrap grid's 12), you need to understand that you don't always have to fill all the twelve columns. Here, we're using 2 columns per image, plus a first column as offset, and you get your five images, centered, with one offset column on the left, and an empty column on the right, and it's fine!

Note that I used img-responsive class to ensure your images never grow too big, outside of their 2 columns, and that I used xs (meaning "extra small") in the class col-xs-2, which means all device screen sizes will get the five images on the same line (and resized to fit), which might not be want you want for smaller devices...

Upvotes: 0

anu g prem
anu g prem

Reputation: 560

This may work for you. or you need to write a custom media css style to achieve this.

<div class="row">
    <div class="col-md-2 col-md-offset-1"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
    <div class="col-md-2"><img src="images/sample.jpg"></div>
</div>

Upvotes: 2

Related Questions