Struggling to align my image and text next to each other in three different sections using Bootstrap

Having difficulty aligning my images to the left of each block of text, they keep appearing underneath. I am utilizing col-md-4 for three sets of text and image.

.container {
  float: left;
  display: block;
}
<div class="container">
  <!--Row with three equal columns-->
  <div class="row">
    <div class="col-md-4">
      <div class="demo-content">

        <p>
          <img src="images/squareicon.png">
          <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="demo-content bg-alt">
        <img src="images/pointericon.png">
        <h3>Central Location</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="demo-content">
        <img src="images/foodicon.png">
        <h3>Catering to Taste</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      </div>
    </div>
  </div>
</div>

htmlcsstwitter-bootstrap

Answer №1

Using Bootstrap, you can easily align the image by adding the pull-left class or adjusting the HTML structure like this:

<img src="images/pointericon.png">
<h3>Central Location</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

You can also modify it to be:

<div class="col-xs-4"><img src="images/pointericon.png"></div>
<div class="col-xs-8">
<h3>Central Location</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>

The above method ensures proper alignment without using float for better control over responsiveness and layout options in different screen sizes.

If you want a fully responsive solution within Bootstrap, consider structuring your code like this:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo-content row">
        <div class="col-xs-4">
          <img src="//placehold.it/120">
        </div>
        <div class="col-xs-8">
          <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div>
      </div>
    </div>
    <div class="col-md-4 row">
      <div class="demo-content bg-alt">
        <div class="col-xs-4">
          <img src="//placehold.it/120">
        </div>
        <div class="col-xs-8">
          <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="demo-content row">
        <div class="col-xs-4">
          <img src="//placehold.it/120">
        </div>
        <div class="col-xs-8">
          <h3>Versatile Spaces</h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the background image to be smoother, with no text overlay

I am working on a website where I need to smoothly change between background images. Here is the JavaScript code I currently have: var bg=[ 'images/best.jpg', 'images/61182.jpg', 'images/bg.jpg' ...

javascripthtmlcss

"Bordering with Rounded Edges: A CSS Styling

Applying rounded corners to my list navigation elements using CSS. These elements also have a border. Here's how it currently appears: The quality of the rounded corner and border combination looks off, with some white shining through. Any suggesti ...

cssrounded-corners

Angular 8 fails to retain data upon page refresh

I have a property called "isAdmin" which is a boolean. It determines whether the user is logged in as an admin or a regular user. I'm using .net core 2.2 for the backend and Postgre for the database. Everything works fine, but when I refresh the page, ...

javascripthtmlangulartypescript

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

javascriptjqueryhtmltags

Custom HTML on Joomla causing carousel to vanish

I've encountered an issue with my Joomla website where my carousel images are disappearing. I have a code snippet from W3 Schools for an automatic banner that works perfectly fine when opened in a browser using Notepad++, but when inserted into a cust ...

javascripthtmlcssjoomlamodule

Acquire feedback from PHP using SweetAlert notifications

I need to update my HTML form to function like this: <script> function getName() { var name = $('#name').val(); var url_send = 'send.php'; $.ajax({ url: url_send, data: 'name=' + name, ...

javascriptjqueryhtmlajaxsweetalert

Find the element that is being scrolled in order to delete its attributes

Issue with the sidebar causing whitespace on mobile devices, and scroll properties need to be removed. When expanding the sidebar, white space appears below it. Various display modes have been tried, but they all push elements below instead of keeping th ...

javascripthtmljquerycssangular

I am interested in creating a text box that has the ability to gather user input and connect it to a search

I have been attempting to develop a text box that can collect answers and link them with the search URL. However, I am encountering issues where even though I can input text into the textbox, it is not being recognized by the script. The error message sh ...

javascripthtml

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

javascripthtmlcssimagehtml-input

The dropdown menu is not able to retrieve information from the secondary database

I have been encountering multiple challenges while working on a web-based dynamic form that I am developing. My current major issue is with populating the second #bodytype dropdown based on the selection made in the first, #bodyman, dropdown. Subsequently ...

javascriptphphtmlajaxdynamicform

The element fails to appear on screen when using Firefox

Check out this site using IE or Chrome and pay attention to the yellow block: Then, try opening the same page in Firefox and watch as the block mysteriously vanishes. Does anyone have any idea why this is happening? Did I make a mistake somewhere? ...

htmlcssfirefox

Directing users to a specific section on another webpage can be accomplished using HTML, JavaScript, or

<nav> <div class='container-fluid'> <h1 class='logo'>Logo</h1> <ul class='list-unstyled naving'> <li><a href='index.html'>Home</a></li> ...

javascriptjqueryhtmlcss

Utilizing media queries and page width in a Moodle theme designed with Bootstrap framework

I currently have my LMS set up with Moodle 4 and the boost theme which is based on bootstrap (github) However, the default page layout appears very narrow on all devices and I would like to utilize the responsive design features of Bootstrap for different ...

csstwitter-bootstrapsassmedia-queriesmoodle

Employ JQuery and Ajax to develop an autocomplete/suggestion feature that generates a list based on JSON data fetched from an API via PHP

I'm facing challenges in developing a dynamic auto-suggest feature for a search field using JQuery with data in JSON format. The JSON data is fetched from an API through PHP. The objective is to have the auto-suggest list update with each keystroke e ...

phpjqueryhtmljsonajax

If the HTML attribute "dir" is set to "rtl", then add a class to the body

I have a website that supports both English and Arabic languages. When the language is changed to Arabic, the "dir" attribute with a value of "rtl" is added to the HTML <html dir="rtl">. I want to add a class to the body element when the language i ...

phpjqueryhtmlcssjquery-ui

Moving from the center to the bottom-right with a CSS transition

I have a specific requirement where I need the container to cover the entire page and shrink when clicked, with an animation. Currently, I am using CSS transition to animate the container shrinking towards the top: The container shrinks slowly to the sp ...

javascripthtmlcsscss-transitions

Display a dynamic variable within React's HTML code

const fetchTime = () => { const currentDate = new Date(); const currentTime = currentDate + ' ' + currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds(); return {currentTime}; } export default fun ...

javascripthtmlreactjs

What is the method for obtaining the value of the second option in a select input field?

My form contains three select inputs : ... <tr> <td><b><?php echo _getText("service.OD.tbr_title.vollondona");?></b></td> <td> <select id="vollondona" name="vollondona" oncha ...

jqueryhtmldomselect

Adjust the size of the frame by dragging the mouse cursor to change both the width

I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...

javascriptjqueryhtmlcssdynamic-html

Sending a form without the need to reload the page

While it's known that Ajax is the preferred method to submit a form without refreshing the page, going through each field and constructing the Post string can be time-consuming. Is there an alternative approach that utilizes the browser's built-i ...

javascriptajaxhtmlforms