bootstrap text and image aligned in the middle

Question

Is there a way in bootstrap to have:

So I would like text and the image to be in the center of the page. On the right to be the text right aligned and on the left to be the image I've tried with divs and then with table without success.

I've tried with :

<img src="your-image/path-here.jpg" class="img-responsive center-block" />

My code:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img style='float:left;width:200px;height:200px; margin-right:10px;' src="img/bootstrap.jpg" />
            <p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
        </div>
    </div>

Edit The text should be aligned in the middle of the image and both should be in the center.

@ZimSystem Why do you think that is duplicated? – DataScientYst Feb 23 '17 at 18:51 — DataScientYst, Feb 23 '17 at 18:51

neophyte · Accepted Answer · 2017-02-23T18:51:58.750

TRY THIS--

Use class="img-responsive pull-right " for image alignment and class="text-left" for text alignment.

@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
#text-left {
padding-top: 15%;

}
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
#text-left {
padding-top: 25%;

}

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#text-left {
padding-top: 30%;

}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
#text-left {
padding-top: 35%;

}

}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
            
           </style>
           </head>
           <body>
          <div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive pull-right " style="width:200px;height:200px;" src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" />
            <p id="text-left" class="text-left">Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
        </div>
    </div>
  </body>
  </html>

use some css to make it in the middle.. check updated snippet — neophyte, Feb 23 '17 at 18:41

score 1 · Answer 2 · answered Feb 23 '17 at 14:31

Did you try using the grid system of bootstrap? Something like this may be your solution:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
        </div>
        <div class="col-md-6">
            <img style='width:200px;height:200px; margin-right:10px;' src="img/bootstrap.jpg" />
        </div>
    </div>
</div>

score 1 · Answer 3 · answered Feb 23 '17 at 14:32

Try this

<div class="container">
<div class="row">
    <div class="col-md-6 text-right">
        <p>Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
    </div>
    <div class="col-md-6 text-left">
<img style='width:200px;height:200px;' src="img/bootstrap.jpg" />
    </div>
</div>
</div>

bootstrap text and image aligned in the middle

3 Answers3