Bootstrap: Display Image and Text side by side in a HTML DIV

Last Reply 4 months ago By Mudassar

Posted 4 months ago

i wanted to add text to the right of the car.i wanted like this:

https://ibb.co/jEXSNo

i am using bootstrap.I am getting the following result:

https://ibb.co/czbRF8

How to add text to the right of the car?

Code:

<div class="row text-center">
    <div class="col-sm-6">
        <img src="images/category/auto.gif" alt="" class="img-responsive" />
        <p>sdfsdfsdf</p>
    </div>
    <div class="col-sm-6">
        <img src="images/category/auto.gif" alt="" class="img-responsive" />
    </div>
</div>

Any help will be highly appreciated.

You are viewing reply posted by: Mudassar 4 months ago.
Posted 4 months ago

Here's a Bootstrap example

 <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <div class="col-sm-5 col-md-5 col-xs-5" style="border: 5px solid #eee; margin: 20px">
        <div>
            <div class="col-sm-4 col-md-4 col-xs-8" style="padding: 5px">
                <img alt="" src="https://www.aspforums.net/Avatars/Mudassar.jpg" style="height: 150px;
                    width: 150px" />
            </div>
            <div class="col-sm-8 col-md-8 col-xs-16">
                <h4>
                    Mudassar Khan</h4>
                <p>
                    Founder of this ASPSnippets and ASPForums and also workds as an Independent Consultant.
                    <br />Holds graduation from Mumbai University with Bachelor’s Degree in Computer Engineering.
                </p>
            </div>
        </div>
    </div>

Demo