Align Text and Image Side to Side With Bootstrap

align text next to image using bootstrap

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.

Bootstrap 4 center image but text left aligned

Instead of using text-center, use mx-auto d-block on the images...

<img src="..." alt="" class="img-fluid mx-auto d-block">

https://www.codeply.com/go/UU1RXLwRUE

Bootstrap image and text side by side in a div

Try this

<div class="col-sm-6 col-md-6 col-xs-6">

<div class="thumbnail" style="border:none; background:white;">

<div class="col-sm-6 col-md-6 col-xs-12 image-container">
<img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" />
</div>

<div class="col-sm-6 col-md-6 col-xs-12">

<h3>Hello World</h3>
<p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p>
</div>
</div>

</div>

css code write this in media query if u need only for mobile

.image-container{text-align:center}

in case if u need both the image and text side by side in mobile device,
remove the height for the image in media query to mobile devices resolution, give width 100% to the image

Bootstrap's grid layout not positioning the image and text side by side. Please tell me what i'm doing wrong?

I do not have enough reputation to comment, so I will post this as an answer.

  1. Just to be sure, you're using col-lg-6, so that will put the columns at 50% after large screen and above. If you're looking at a small screen, you'd need either col-md-6, or col-sm-6, or just col-6 if you want 2 columns all over.

  2. If you already know that, then add the class img-fluid to your image. That should work out. This is the Bootstrap class to make images responsive. Bootstrap Responsive Images

I tried it on the attached JSFiddle link, make sure to expand the display box for the -lg breakpoint to take effect.

bootstrap text and image aligned in the middle

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>

How to align a image and a text together side by side, using css and react.js

try:

.container {
display: flex;
align-items: center;
}

and remove the inline-block attributes from the p and img elements.



Related Topics



Leave a reply



Submit