CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Gizz
Gizz

Reputation: 3

Positioning images from left to right using Bootstrap

I have div with some images in it. This is my html code:

<div id="slide-menu-list" class="row">
    <a href="home.html"><img class="img-responsive" src="img/icon_menu1a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu2a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu3a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu4a.png" /></a>
    <a><img class="img-responsive" src="img/icon_menu5a.png" /></a>
</div>

And here the css:

#slide-menu-list{
   position:fixed;
   bottom:0px; 
   left:0px;
}

But the images are stacking from top to bottom. How can I make the images stack from left to right using Twitter Bootstrap?

Upvotes: 0

Views: 2085

Answers (2)

Codepsdtoxhtml
Codepsdtoxhtml

Reputation: 11

You need to add width:100%; in #slide-menu-list div

#slide-menu-list{
   position:fixed;
   width:100%;
}

and then

#slide-menu-list a img{
    display:block;
    float:left;
    width:25%;
}

Upvotes: 1

Hamed Khatami
Hamed Khatami

Reputation: 545

Use pull-left class ,and specify width for your images

following code

    <div id="slide-menu-list" class="row">
        <a href="home.html"><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
        <a><img class="img-responsive pull-left" src="/Capture.PNG" /></a>
    </div>

    <style>
    img
    {
         width:20%;
    }

    #slide-menu-list
    {
         position:fixed;
    }
    </style>

if you want that your images be fixed in your page please use affix bootstrap in complex solution Affix

Upvotes: 1

Related Questions