samedi 18 juin 2016

Make the image layout more organized using bootstrap and CSS

So I have basically used manual percentages to make these images lie next together. As you see they are not very neatly layout or organized. How can I make it look more dashing?

Here's the code:

<div class="jumbotron jumbotron-fluid" style=" margin-top: 90px; ">


    <div class="container">
        <div class="row">
            <div class="col-lg-2">
                <img src="./assets/img/glass.jpg" class="img-responsive " style="width:95%"/>
                <img src="./assets/img/rift.jpg" class="img-responsive m-y-1" style="width:95%;"/>

            </div>
            <div class="col-lg-8">
                <img src="./assets/img/mhacks.jpg" class="img-responsive" style="width:100%; "/>
            </div>

            <div class="col-lg-2">
                <img src="./assets/img/mindwave.png" class="img-responsive" style="width:120%;"/>
                <img src="./assets/img/VR.png" class="img-responsive m-y-1" style="width:120%;"/>

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



</div>

Here's how it looks like: http://imgur.com/e2I3yLu

Also here's the link to the website: monajalal.github.io

Any suggestion is really appreciated. I wonder if there's a more straightforward method to image layout or any automatic method?

Aucun commentaire:

Enregistrer un commentaire