Bootstrap's grid layout doesn't have images and text side by side. Please tell me what am I doing wrong?


various queens

I'm only a few months old in web development and I know my code is simple but I've tried everything I know and it doesn't work. If I increase the width of the image to 100%, the text and image don't align side by side. I also want the image to go off the screen. Here is my html code (removed the image as I can't post it). my css code contains only width=100%;andoverflow:hidden;

    <div class="row">

  <div class="col-lg-6">

    <h2>BE HEALTHY</h2>
    <p>We are Fitlo, your number one app for weight loss, diet planning and a better overall well being. We’re dedicated to giving you the very best of health and lifestyle from the comfort of your home or office.</p>

 </div>


<div class="col-lg-6">
  <img class="image" src="" alt="bowl of food">
</div>

</div>
Siddhartha Bansali

I don't have enough reputation to comment, so I'll post this as an answer.

  1. To be sure, you're using col-lg-6, so after the big screen and above will put the column at 50%. If you're looking at a small screen, you need col-md-6, or col-sm-6, or just col-6two columns.

  2. If you already know this, add the class img-fluidto your image. That should work. This is the Bootstrap class that makes the image responsive. Bootstrap Responsive Images

I tried it on the attached JSFiddle link , be sure to expand the display box for the -lgbreakpoint to take effect.

Related


Bootstrap grid not centered? what am i doing wrong

hidden cheese I'm working on a free code bootcamp project and I'm hitting a roadblock. I can't center the paragraph text below the image. I have set to grid 4. <div class="container"> <div class="row"> <div class="jumbotron"> <div class="col-xs-12"

Script doesn't work. What am I doing wrong?

username First, I found this guide which details what I need. https://imagemagick.org/script/connected-components.php For the life of me, I can't get it to work. does anyone know I have tried many variations of the scripts listed in the guide. Also when I run

group by doesn't work...what am I doing wrong?

John Rowe Been stuck for hours. Right now, I'm trying to group the HR1 and HR2 values in the same row by Submission_Id, but Oracle is returning two separate entries for the exact same Submission ID and Response_Type. Instead of grouping all values for HR1 and

Gettext doesn't work What am I doing wrong?

Nazan Mahmood I'm making a little plugin to share posts on my word Everything works fine, but I can't get the translatable string, throwing wpml. Bear with me this is not a question about wpml, my problem is that I don't know how to add Get text to my code the

This jQuery selector doesn't work, what am I doing wrong?

He said I want to attach the onclick event to abut can't seem to get it to work in the following way: $("[class^=field-promote_image_]").each(function() { var a = $(this).find('.file-upload > a'); a.on('click', function(e){ e.preventDefault();