How can you achieve text wrapping and responsiveness while making an image float to the right with Bootstrap?

I'm currently utilizing Bootstrap to create a web page showcasing an article with multiple images. The images that float left are working as expected.

However, I am facing an issue when trying to make the image float to the right. I have attempted the following methods:

  1. Adding the float-right class to the image (but unfortunately, this doesn't seem to work)
  2. Placing the text around the image in a separate column (resulting in the text not wrapping around the image correctly)
  3. Using the order-1 and order-12 classes on the respective elements (this approach fails with no clear explanation)

https://i.sstatic.net/lNN3q.png

Below is the code snippet I am working with:

<div class="row">
  <div class="col-lg-5 col-md-4 col-sm-12">
    <img src="resources/pic.jpg" width="100%" />
    <p>
      caption for photo here
    </p>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>
htmlcssbootstrap-4formatting

Answer №1

In my personal opinion, the CSS property shape-outside is a great fit for this specific layout. Although it's not fully functional right now, we can look into other approaches.

Whether you choose to apply float: left; or float: right; to the image-holder element or the image itself, always remember to position the image or image holder PRIOR to the text (or the text-holder element).

It's essential to use the float property (left or right) SOLELY for the image or image-holder, and NOT for the text or text-holder. Take a look at the code snippet below for better clarity-

img {max-width: 100%}

.the_article {
    width: 500px;
    margin: 30px auto;
}

.img-right {
    width: 300px;
    float: right;
    margin: 0 15px 0;
}

.img-left {
    width: 300px;
    float: left;
    margin: 0 15px 0;
}
<div class="the_article">
    <figure class="img-right">
        <img src="https://example.com/image.jpg" alt="">
    </figure>
    <section>
        <h2 style="text-align: right;">Lorem ipsum dolor sit amet.</h2>
        <p style="text-align: right;">Lorem ipsum dolor sit amet...</p>
    </section>
</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

Can someone help me locate the selector for using .click in Nightmare.js?

I am currently using Nightmare.js to automate the scraping of a webpage. As a sysadmin, my understanding of Node.js and CSS is limited. So far, I have been able to successfully use Nightmare to input and click on certain buttons in order to log in. I iden ...

cssnode.jsnightmare

Problem with Agile Carousel and thumbnail component

I have incorporated the Agile Carousel plugin into my website to create multiple slideshows. The first slideshow at the top is working fine, but I am experiencing an issue with the carousel in the "About" section at the bottom. While I have successfully se ...

htmljsonjquerycarousel

Tips for centering text in a dijitTextBox:

Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...

cssdojoxpagesdijit.form

Using jQuery sortable with the overflow property set to hidden to sort items between two lists

I need help with a jQuery sortable feature where I have two lists and can move items between them: $( '#productsList, #orderList' ) .sortable({connectWith: '.containerDiv'}) .disableSelection(); My issue arises when I try to implement ...

javascriptjqueryhtmlcss

Media queries for the header background image display

I am currently working on a small web project and I want to change the background image in the header section while also making it responsive. I attempted to use a class called "header_accueil" in my header to distinguish different sections of the site, bu ...

htmlcssheadermedia-queriesbackground-image

Select a different radio button to overwrite the currently checked one

I am facing a situation where I have two radio buttons. The default checked state is one of them, but I want to change that and make the other one checked by default instead. Here is the HTML code: <div class="gui-radio"> <input type="radio" v ...

javascriptjqueryhtmlformsradio-button

Troubles with loading images on Node.js, Express, and EJS powered Bootstrap 5 navbar

Currently, I am in the process of creating a website using express/node.js/ejs. However, I am facing challenges when it comes to constructing a navbar with Bootstrap 5.0. In my app.js file, I have included express.static: app.use(express.static('publi ...

javascripthtmlexpressejsbootstrap-5

Troubleshooting a Minimum Width Problem in HTML and CSS

Having trouble with setting a minimum width for a specific section. When the browser size is smaller than the set minimum width, the background color/image defined by CSS does not expand beyond the window size. Essentially, when scrolling horizontally to v ...

htmlcss

An iframe for the Vimeo player set to 100% of

I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...

cssvue.jsvimeo-player

What is the best method to verify image dimensions and size for three distinct target platforms, all of which have different image dimensions but the same size, within

I'm currently working on a feature that involves an image uploader for various platforms, each with its own set of recommended image dimensions. For example: platform 1 - dimension 920 x 300, platform 2 - 210 x 200, and platform 3 - 790 x 270. When th ...

htmlvue.jsvuejs2vuetify.js

Creating a sticky section with Tailwind CSS utility classes

I have a page in my Next.js web app, and I want to make the section highlighted in blue (wrapped in <aside> tag) sticky so that it stays in place while scrolling, with only the main section containing the chart scrolling. The code snippet below is f ...

cssnext.jstailwind-css

"Creating a HTML Table with Merged Cells using colspan and rowspan

Creating an HTML table with a unique layout is my latest project. I envision it to look like this: +-------+---+ | | | +-------+ + | | | +-----+-----+ | | | +-----+-----+ To achieve this, I'm utilizing a colgroup to split t ...

htmlcsshtml-table

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

I am attempting to pass different data to my other component. Essentially, when my variable firstvalue is not null, I want to send firstvalue. Currently, this setup is functioning as expected. However, I now wish to send secondvalue if it is not null. < ...

javascripthtmlvue.js

Can you provide guidance on aligning text in a text area to the center?

I've been trying to align my "field labels" in the center of their respective text fields without much success so far. To achieve this, I resorted to using tables but that didn't quite do the trick. Currently, I'm experimenting with CSS prop ...

cssformshtml-tablealignmentvertical-alignment

Button click not functioning to switch the displayed image in Javascript

As a beginner in Javascript, I'm attempting to create a basic button in html that switches the originally shown image when clicked. Unfortunately, my current code isn't functioning properly. Could someone please assist me in identifying the mista ...

javascripthtmlimagebutton

Tips for efficiently implementing AJAX requests for multiple forms within a single webpage

Previously, I had a form where clicking submit would hide the form and display the result on a div with classname=dig. However, after adding more forms, all the forms started submitting at the same time instead of individually. How can I fix this issue in ...

javascriptjqueryhtmlajax

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...

androidcssfont-faceandroid-browsercustom-font

Harness the Power of HTML5 with Windows 8 AdControl

My setup for the Windows 8 AdControl looks like this: <div id="adControl" style="width: 728px; height: 90px; border: solid 1px red; visibility:visible;" data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: &a ...

htmlwindows-store-appswindows-store

Tips for applying unique CSS classes to individual templates in Joomla

I manage a website at www.kadamjay.kg using an RT template system where each language version has its own unique template. However, when I add a class to a specific element, it only changes on one template and there are no additional templates in the pat ...

cssclasstemplatesjoomla

Tips for resolving the issue of CSS blocks disappearing when designing a webpage

When creating a responsive web page, the child block "overflows" from the parent block. This causes the entire page to shift to the left and an empty bar appears on the right side, moving all the content. I need to ensure that all content is positioned cor ...

cssbootstrap-4frontend