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.
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 eithercol-md-6
, orcol-sm-6
, or justcol-6
if you want 2 columns all over.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
How to Prevent Mails Sent Through PHP Mail() from Going to Spam
Php Fatal Error: Uncaught Pdoexception: Could Not Find Driver
Contact Form 7 Cause Http 500 Error
Laravel Composer Sees Wrong PHP Version
How to Set Current Date as Default Value of an Input
Php Passing Variable Id Through Href
Count Same Values in Array and Combine into Array
I Have Three Columns, I Want to Combine Them All in One Main_Table
Symfony: an Exception Occured in Driver: Could Not Find Driver With MySQL
Add Space After Every 4Th Character
Find Combination(S) Sum of Element(S) in Array Whose Sum Equal to a Given Number
Laravel: Products,Categories and Subcategories! (Relation Ships)
Laravel: Property [Name] Does Not Exist on This Collection Instance
Laravel Convert Query MySQL to Model Query