Photoshop Question posted in
The official user guide can be found here.

How design an unordered list of images horizontally with Bootstrap? – Photoshop

I am a new web designer and I am struggling right now in designing unordered list of icons to be displayed horizontally without the bullet.

Here’s my html code:

<section id="call-to-action" class="section-padding">
        <div data-velocity="-.3" class="overlay-bg cta-bg"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="cta-text text-center">
                        <h2>Call to action</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius labore itaque, nam eaque aut repellat ratione nesciunt explicabo numquam sit.</p>
                        <div class="partners">
                            <ul style="list-style: none;">
                                <li>
                                    <img class="img-responsive"
                                        title="Illustrator" alt="Illustrator"
                                        src="../Assets/img/software/illustrator_icon.png" />
                                    <img class="img-responsive"
                                        title="Photoshop" alt="Photoshop"
                                        src="../Assets/img/software/photoshop_icon.png" />
                                    <img class="img-responsive"
                                        title="InDesign" alt="InDesign"
                                        src="../Assets/img/software/inDesign_icon.png" />
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End call to action -->

CSS Code:

#call-to-action {
    position: relative;
}
.section-padding {
    padding: 50px 0;
}
        .partners ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
            .partners ul li {
                display: inline-block;
                float: left;
                width: 20%;
            }

Here’s the link to JSFiddle that includes all of my code: https://jsfiddle.net/nta1qov2/

Could you please tell me how I can do this?

Tags:

2

Answers


  1. 0

    you can try this one:

    #call-to-action {
    position: relative;
}
.section-padding {
    padding: 50px 0;
}
        .partners ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
            .partners ul li {
                display: inline-block;
                float: left;
                /*width:20%; remove width 20% ;*/
                width: 100%; /* add width :100%;*/
            }

    DEMO HERE

    Add this css code”:

    .partners ul li {
              position: absolute;
               text-align:center;
                display: inline-block;
                width: 100%;

            }

    [UPDATED DEMO HERE]2

    Login or Signup to reply.
  2. 0

    If you wish to do it through only twitter-bootstrap, then the following code illustrates the same:

    HTML:

     <div class="form-group">
    <div class="pull-left control-label">
       <img src="../img1.jpg" />
    </div>
    <div class="pull-left control-label">
       <img src="../img2.jpg" />
    </div>
    <div class="pull-left control-label">
       <img src="../img3.jpg" />
    </div>
  </div>
  <div class="clearfix"></div>

    Here, pull-left, is to make unordered horizontal list.
    control-label for right indentation.
    form-group for vertical indentation.
    clearfix for nullifying the float as a result of pull-left after completion.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search