Twitter Bootstrap Question posted in

How do I align my text div next to my image? – Twitter bootstrap

I need to display my text next to my image. The image info with social links need to stay below the image. I’ve tried clearfix codes but no result has worked sufficiently. I am working with a bootstrap build and I may be missing something simple, thus I’ve left in all my html in case I moved something (can’t see that I did though). I’ve included the specific css as well although I have global code too (not added here). Any suggestions?

#team {
  padding: 60px 0;
  text-align: center;
}
#team h2 {
  text-transform: uppercase;
}
#team .team {
  margin-top: 40px;
  margin-bottom: 20px;
}
#team .team h4 {
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
#team .team p {
  color: #a3a3a3;
}
#team .team a {
  color: #0d0d0d;
  font-size: 22px;
  padding-right: 10px;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#team .team a:hover,
#team .team a:focus,
#team .team a:active {
  color: #a3a3a3;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="team">
  <div class="container">
    <h2>INFO</h2>
    <hr class="sep">
    <p>MORE INFO</p>
    <div class="row wow fadeInUp" data-wow-delay=".3s">
      <div class="col-md-4">
        <img class="img-responsive center-block" src="IMAGE FILE" alt="THIS IS AN IMAGE">
        <h4>NAME</h4>
        <p>PROFESSION</p>
        <div class="team-social-icons">
          <a href="***" target="_blank"><i class="fa fa-facebook"></i></a>
          <a href="***" target="_blank"><i class="fa fa-twitter"></i></a>
          <a href="***" target="_blank"><i class="fa fa-instagram"></i></a> 
        </div>
      </div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</section>
Tags:

2

Answers


  1. 0

    A <div>‘s content will go to the next line, adding a break before it. I would look at organising the layout into a <table> with a left <td> for the image, and a right <td> for the description and the links to social media.

    Login or Signup to reply.
  2. 0

    Problem

    Align text to the side of an image.

    Solution

    If you want text to sit on the side of the image you need to add a float to the image.

    your code is going to need more css to obtain your complete desired result but to get you going you should create a class to add to the image which will have the float: left; property. 

    .floatImg { float: left;}

    Then apply it to the image,

    <img class="floatImg">

    To show you a small example of this all I did was add a float to your image existing class. “but you should create a new one”. Then I moved the h4 above the image so the <p> would wrap. Once you apply this to your project you can apply more css to make it all look nice.

    Padding / margin etc

    Bootstrap

    Luckily you are using bootstrap. So to take this a step further there is a lot of options here you can use to make this look nice. Bootstrap gives you the ability to use columns and rows.

    So if you know you need to create a 2 column row. img in one and text in the other you could do that.

    Example of bootstrap 2 col

    <div class="row">
    <div class="col-lg-6 col-md-6">
          <img>
    <div>  
    <div class="col-lg-6 col-md-6">
         <p> txt here</p>
    <div>    
</div>

    #team {
  padding: 60px 0;
  text-align: center;
}
#team h2 {
  text-transform: uppercase;
}
#team .team {
  margin-top: 40px;
  margin-bottom: 20px;
}
#team .team h4 {
  margin-top: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
#team .team p {
  color: #a3a3a3;
}
#team .team a {
  color: #0d0d0d;
  font-size: 22px;
  padding-right: 10px;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#team .team a:hover,
#team .team a:focus,
#team .team a:active {
  color: #a3a3a3;
}

.img-responsive {
  float: left;
  }
    <section id="team">
  <div class="container">
    <h2>INFO</h2>
    <hr class="sep">
    <p>MORE INFO</p>
    <div class="row wow fadeInUp" data-wow-delay=".3s">
      <div class="col-md-4">
<h4>NAME</h4>
        <p>PROFESSION</p>
        <img class="img-responsive center-block" src="IMAGE FILE" alt="THIS IS AN IMAGE">
        
        <div class="team-social-icons">
          <a href="***" target="_blank"><i class="fa fa-facebook"></i></a>
          <a href="***" target="_blank"><i class="fa fa-twitter"></i></a>
          <a href="***" target="_blank"><i class="fa fa-instagram"></i></a> 
        </div>
      </div>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search