CODEWITHSUNDEEP
phphtmlcssimage
Grey
Grey

Reputation: 147

Align text and image side to side with bootstrap

How do i get the image to be centered aside the text & button? The image is on the left because i place float:left, but if i dont place it, the image is centered but the text goes below it. Using bootstrap 3.3.7

enter image description here

 <div class="container">
    <div class="row">        
        <div class="col-md-4 col-xs-12">
            <img src="images/hand.jpg"class="img-responsive"/>
        </div>
        <p>Some text heree</p>
        <h1>Title</h1>      
        <p>Some text here </p>
        <button>CTA</button>
   </div>
</div>

CSS

<style>
.row img{
    width:300px;
    float:left;
    height:auto !important;
}
.container{
    text-align: center !important;
    width:100%;
}
.row{
    margin-top:0;
}
p{
    font-family:"Fjalla One", sans-serif !important;
    font-size: 20px;
}
h1{
font-family: 'Knewave', cursive;
font-size:40px;
color:black;
margin:0 !important;
padding: 0!important;
}
</style>

Upvotes: 1

Views: 15910

Answers (6)

Hamid R.
Hamid R.

Reputation: 127

Your should use the bootstrap classes instead of your own css. Because they have handled a lot of cases and their css is stable. Here is pure bootstrap solution for you.

I have used another image, your image will fit well.

Note: Do let me know if you face any problem. 

p{
    font-family:"Fjalla One", sans-serif !important;
    font-size: 20px;
}
h1{
  font-family: 'Knewave', cursive;  
  font-size:40px;
  color:black;
  margin:0 !important;
  padding: 0!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">        
        <div class="col-md-6 col-xs-6 text-right">
            <img src="https://code.google.com/images/developers.png" style="height: 80px;"/>
        </div>
        <div class="col-md-6 col-xs-6">
          <p>Some text heree</p>
          <h1>Title</h1>      
          <p>Some text here </p>
          <button>CTA</button>
        </div>
   </div>
</div>

Upvotes: 1

VSM
VSM

Reputation: 1785

    .row img{
        width:300px;
        float:left;
        height:auto !important;
    }
    .container{
        text-align: center !important;
        width:100%;
    }
    .row{
        margin-top:0;
    }
    p{
        font-family:"Fjalla One", sans-serif !important;
        font-size: 20px;
    }
    h1{
    font-family: 'Knewave', cursive;
    font-size:40px;
    color:black;
    margin:0 !important;
    padding: 0!important;
    } 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
     <div class="container">
        <div class="row">        
            <div class="col-xs-6 col-sm-6 ">
                <img src="images/hand.jpg"class="img-responsive"/>
            </div>
            <div class="col-xs-6 col-sm-6">
               <p>Some text heree</p>
              <h1>Title</h1>      
              <p>Some text here </p>
              <button>CTA</button>
            </div>
       </div>
    </div>

This works for you... Bootstrap already has column classes.By applying them you can resolve the problem.

Upvotes: 0

Dzontra
Dzontra

Reputation: 100

Not really sure if I understood correctly what you'd like to achive. If you just want to place an image where the title is, modify html to:

 <div class="container">
    <div class="row">        
        <p>Some text heree</p>
       <img src="images/hand.jpg"class="img-responsive"/>      
        <p>Some text here </p>
        <button>CTA</button>
   </div>
</div>

If that's not what you're trying to do, please provide more info about where exactly you'd like image to be.

Upvotes: 0

Rohit Verma
Rohit Verma

Reputation: 3785

You just need to use display:flex; property to do this:-

.two-img{ display:flex;  justify-content: center;}
<div class="two-img">
<img src="images/hand.jpg"class="img-responsive"/>
<img src="images/hand.jpg"class="img-responsive"/>
</div>

Upvotes: 0

AutoTester213
AutoTester213

Reputation: 2862

To get the image in between the texts, you can just put the div between the <p> tags or where ever you want to it then remove the float:left attribute be here is a example:

.row img{
    width:300px;
    height:auto !important;
}
.container{
    text-align: center !important;
    width:100%;
}
.row{
    margin-top:0;
}
p{
    font-family:"Fjalla One", sans-serif !important;
    font-size: 20px;
}
h1{
font-family: 'Knewave', cursive;
font-size:40px;
color:black;
margin:0 !important;
padding: 0!important;
}
<div class="container">
    <div class="row">        
        <p>Some text heree</p>
        <h1>Title</h1>    
        <div class="col-md-4 col-xs-12">
            <img src="https://www.dike.lib.ia.us/images/sample-1.jpg"class="img-responsive"/>
        </div>
        <p>Some text here </p>
        <button>CTA</button>
   </div>
</div>

A better option would be to wrap your content additional info on wrap text

Upvotes: 0

Minal Munakarmi
Minal Munakarmi

Reputation: 167

 <div class="container">
    <div class="row">        
        <div class="col-md-4 col-xs-12">
            <img src="images/hand.jpg"class="img-responsive"/>
        </div>
         <div class="col-md-8 col-xs-12 right-content">  
           <p>Some text heree</p>
           <h1>Title</h1>      
           <p>Some text here </p>
           <button>CTA</button>
         </div>
   </div>
</div> 
you should wrap your content to other div like col-md-8 or any class you want to.
There is two option for you
<style>
.left-content{
  padding-left:300px;
}
</style>

and other option is that bootstrap col automatically separate into two columns i.e side by side

Upvotes: 0

Related Questions