CODEWITHSUNDEEP
htmltwitter-bootstrap
avasssso
avasssso

Reputation: 257

align text next to image using bootstrap

I am using bootstraps grid system to try and align the text next to the image. For some reason, it's not working for me. This what it looks like and I just want the text next to the image on the right side.

enter image description here

Here is my html: 

   <div class="container">
   <h1 class="text-center">Executive Directors</h1>
   <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
            <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>
   </div>
      <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
            <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>
   </div>
</div>

any help would be appreciated!

Upvotes: 0

Views: 19043

Answers (2)

user4386714
user4386714

Reputation:

change your code with this 

   <div class="container">
   <h1 class="text-center">Executive Directors</h1>
   <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
        </div>
        <div class="col-md-6">

            <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>

        </div>
   </div>
      <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
        </div>
        <div class="col-md-6">
        <h3 class="text-center">Maja Miletich</h3>
                <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>

        </div>

</div>

in each row you need do add two cols, one for the picture and one for the description, like this:

<div class="row">
    <div class="col-md-6">
       <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
    </div>
    <div class="col-md-6">
       <p> desccription here</p>
    </div>
</div>

the description now appear next to the image.

in the bootstrap's page there is a grid's tutorial, learn it here.

Upvotes: 2

Soubhik Mondal
Soubhik Mondal

Reputation: 2666

In Bootstrap's grid system, to get two elements side-by-side you would need to nest two .col divs within a single .row, like below:

<div class="container">
    <h1 class="text-center">Executive Directors</h1>
    <div class="row text-center">
        <div class="col-md-6">
            <img class="" src="/wp-content/themes/creativeforces/images/majapic.jpg" width="250px">
            <h3 class="text-center">Maja Miletich</h3>
        </div>
        <div class="col-md-6">
            <p><strong>Maja Miletich </strong>is the CEO of Zip Zap Zop Kids, LLC. Maja has worked with children on many levels. Having a brother with Autism has given Maja an understanding of how powerful communication is for ALL children. Maja has worked for years as a teacher where she practices emergent curriculum. Maja has studied theater and improv at A.C.T. in San Francisco as well as graduated from The Second City Training Center in Hollywood where she studied improv and sketch comedy. Maja has her Bachelors Degree in Early Childhood Education. Maja's focus is on inclusive classrooms where curriculum is designed to allow children and young adults to feel comfortable expressing themselves in whichever way they feel most comfortable. Maja believes when we can share with one another what has been taught then, and only then, are we actually learning.</p>
        </div>
    </div>
</div>

To learn more about bootstrap's grid system go here.

Upvotes: 5

Related Questions