Positioning Text Beside an Image Inside a Bootstrap Grid Column

Just starting out with coding and seeking assistance with a layout inquiry related to bootstrap.

I have an image and a paragraph nested within a column in an attempt to utilize the grid system in bootstrap. My goal is to have the image float to the left with the text wrapping around it and filling the width of the column on the right.

You can view the desired layout here: Layout Goal

However, my current situation has the text appearing below the image: Layout Current

I've set up a row within the main container, with two columns - one with a md-8 width (containing the image and paragraph) and another with a md-4 width serving as a space holder to maintain 2/3 width of the container.

Here is the code I used:

<section class="row">

  <div class="col-md-8 background-white py-3">
    <img src="/assets/ProjectImages/AboutMe300299.jpg" class="rounded float-left" alt="Me and My Fam">
    <p class="float-left"> <!--need to wrap this text-->
      Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
      Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
      Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
      Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
    </p>
  </div>

  <div class="col-md-4">
    <!--Space Holder-->
  </div>

</section>

I've followed the recommendations by using the float-left class in bootstrap and including both the image and paragraph within the same column. Any suggestions on a better approach or what might be incorrect in my implementation? Thank you for any help!

htmlcsslayoutbootstrap-4

Answer №1

I have solutions available for both Bootstrap 4 and Bootstrap 5. To delve deeper into this topic, I suggest checking out the documentation on clearfix and w-100 on the official Bootstrap website.

Here is the solution for Bootstrap 4:

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadec4dfc4d9">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    
    <section class="row>

        <div class="col background-white py-3">
            <div class="clearfix">
                <img src="https://picsum.photos/100/100" class="col-md-2 w-25 rounded float-left" alt="...">
                <p class="d-inline"><!--have to figure out how to wrap this-->
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum  My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                  </p>
              </div>
        </div>
      
        <div class="col-md-4">
          <!--Space Holder-->
        </div>
      
      </section>
<!--<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d56485648551a1d0c1949">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>-->
</body>
</html>

This is the Bootstrap 5 solution:

<!DOCTYPE html>
<html lang="en>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f7e9f7eaa5a2b3a6f6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <title>Document</title>
</head>
<body>
    
    <section class="row">

        <div class="col background-white py-3">
            <div class="clearfix">
                <img src="https://picsum.photos/100/100" class="col-md-4 mb-3 ms-md-3 rounded float-sm-start" alt="...">
                <p><!--have to figure out how to wrap this-->
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                    Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
                  </p>
              </div>
        </div>
      
        <div class="col-md-4">
          <!--Space Holder-->
        </div>
      
      </section>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f415f415c1314051040">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

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

Creating responsive images in a navbar with HTML and CSS

I need help with this code snippet: <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <div class="d-flex flex-row justify-content-center align-items-center"> <a cla ...

javascripthtmlcssbootstrap-4

Can someone help me troubleshoot the issue I'm having with this jQuery API function?

Greetings everyone, I'm facing an issue with my jQuery code. I am attempting to use the CoinMarketCap API from cryptokickoff to showcase cryptocurrency statistics on my website. I understand how to display them, but the appending process to my column ...

jqueryhtmlapi

Why is it that when drawing rectangles with HTML 5 canvas using pixel size, a black rectangle appears instead of blue?

My intention was to create a large blue rectangle measuring 320 X 240 pixels on the Canvas in Firefox, but I'm only getting a black rectangle instead. This issue is perplexing as I am simply experimenting with pixel drawing and for some reason, it&apo ...

javascripthtmlfirefoxcanvaspixel

Utilizing AngularJS for seamlessly closing Bootstrap Modal Popup

Having recently delved into AngularJS, I am seeking assistance with a particular issue; In my AngularJS (v 1.6) application, there is a Bootstrap modal window for user login. Once the user successfully logs in, I wish for Angular to automatically close the ...

javascriptangularjshtmltwitter-bootstrap

Positioning a span to be below an input field

Below is the code for a Blazor component that includes a textbox which can be edited with the click of a button. @if (_editing) { <div class="floatingbox position-relative"> ...

cssbootstrap-4blazor-server-side

Is it feasible to send a GET form to two separate views using two buttons?

On one view, I have a form that functions perfectly. http://myurl.com/myapp/filter_objects/?risk__worktask=1&craft=3 In another view, I need to export the filtered list to a PDF. Currently, I store the results in session and access the list from ther ...

htmldjangoformsget

A versatile JavaScript function built to efficiently validate numerous forms across a webpage

Sorry for the simple query, but I'm still learning JavaScript. I have a script that checks if a text field is empty to validate user inputs. If it's not empty, a confirmation window pops up before submitting the form and uploading the information ...

javascriptphphtml

How to ensure the footer stays at the bottom of the page even when the Treeview control expands

Greetings Everyone! I'm facing an issue with keeping the footer pinned at the bottom of the page. The treeview control I'm using overlaps the footer when expanded. Can anyone assist in ensuring the footer remains at the bottom of the page? < ...

cssasp.netbootstrap-4footer

Expand the width of columns in a Bootstrap 4 table

I have been trying to adjust the width of the columns in my table without success. I've attempted using percentage, pixels, and rems, but none of these methods seem to be working. Interestingly, I am able to adjust the column width when there are a sm ...

htmlbootstrap-4

Node.js Link Management: A Guide to Updating Links

For some time now, I've been attempting to update the tabs on my navigation bar (including the links) when a user logs in. The issue arises on the index page, where users can access it both when logged in and not logged in. In my navigation bar, all t ...

javascripthtmlnode.jsexpressejs

Selenium: Utilizing the get_attribute() function with a CSS query

I am attempting to retrieve the value of the title attribute. There are multiple links on the page and I need to specifically select the first link and extract its title attribute. Here is the selenium command that I have used: self.se.get_attribute("c ...

cssseleniumselenium-rc

One common query is how to access an HTML element from JavaScript using its ID, particularly when the element belongs to a different HTML document

Following up on the question title: In addition, the HTML document is loaded into the parent element using AJAX in the following way: $.ajax({ url: 'calender.aspx', cache: false, dataType: "html", success: functi ...

javascripthtmlajax

Having extra space can occur when adding margin to a div within another div in HTML5

I am facing an issue with the following piece of code: <body> <div class="page-top"> * </div> <div class="page-bottom"> <div class="contentbox"> <h1>CONTENTBOX</h1> </div ...

csshtml

Issues have been reported with Bootstrap Select in jQuery and ASP.NET, as it does not automatically detect the value

Currently utilizing the ASP NET MVC framework along with the Bootstrap Select plugin. The issue at hand is attempting to determine if any of the values from a List match a value in a View, and then automatically selecting that option within the <select& ...

c#jqueryasp.net-mvcbootstrap-4

Choose everything except for the list and its heading

I have a portion of HTML code on my hands. <div class="ProductDescriptionContainer"> <p>This handsome Clergy Shirt has a trim low neckband with two reinforced buttonholes, one at the front, one at the back, to align with Ziegler's Collare ...

htmlxpathhtml-agility-pack

Contrast between using .trigger('play') and invoking .play() with jQuery

Can someone explain the difference between the jQuery functions ".trigger('play')" and ".play()"? I am trying to make my website play a sound when a navigation button is pressed, using an HTML5 audio tag. I have some jQuery code that works: $(& ...

jqueryhtml

Tips for aligning elements vertically within a <td> tag

I am looking to vertically align 3 elements within my <td> tag, specifically in the center/middle. These are the elements I want to align: An image button (a tag) with a top arrow image A jQuery slider Another image button (a tag) with a bottom arr ...

htmlcss

extracting data from checkbox to use in an angular function upon being selected

Currently, I am creating a list of checkboxes with distinct string values: heading, paragraph, list, table, visualtitle. I believe the current approach using (change)="onChange('heading', $event.target.checked) may not be the best way to han ...

htmljquerycssangular

When hovering over one div, both it and another div should be displayed simultaneously. The second div should continue to be displayed even when hovered over

I am looking to keep another div displayed when hovering over it - in this example, it says "hello." The div I want to remain visible is not a child element of the main div where I initiate the hover event. document.write("<base href=\"" + docum ...

htmlcssangular

Semantic UI Footer allows you to easily create a stylish

Greetings! I'm new to the semantic-ui framework and I'm encountering an issue with the footer. My goal is to have the footer always stay at the bottom of the page without being fixed. Here's a snippet of my simple HTML code: <!DOCTYPE h ...

htmlcsssemantic-ui