Floating with Bootstrap Utility

Have you ever wondered about the proper usage of bootstrap float utility?

Check out this example:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="float-right">First</div>
  <div class="float-left">Second</div>
</div>

Although it may seem like float doesn't work in the example above, that's because Bootstrap uses a flex strategy. So why is float still part of BS4?

Answer №1

The Bootstrap documentation highlights the fact that float utilities do not affect flex items.

It is recommended to avoid using floats on flex items and instead use them on other elements.

Floats are not intended for creating columns but rather for allowing text to wrap around different elements.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6">
      <img src="http://placekitten.com/75/75" class="float-left">
      <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>
    <div class="col-6">
      <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>
  </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

When scrolling, dynamically change the background color by adding a class

I am looking to achieve a scroll effect where the color of the menu buttons changes. Perhaps by adding a class when scrolling and hitting the element? Each menu button and corresponding div has a unique ID. Can anyone suggest what JavaScript code I should ...

Issues with div and hyperlinks/forms

I am currently working on creating a left sidebar in my HTML code, but I am still new to this. In the div for the sidebar, I have three buttons. However, Weebly keeps notifying me of an issue with the <a> tag, and the second button's link appear ...

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria: Show the "x" div if it's not already visible Display the "y" div only if the "x" div is already being displayed Show the "z" div only if both the "x" and "y" divs are alrea ...

The functionality of the Ajax code is taking an unusually long time

After running my Ajax code, it took a surprising 3 minutes and 15 seconds to load. What could be causing this delay? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.j ...

The CSS transition fails to function correctly when rendering a React element within an array

When rendering a React component within an array using CSS transitions, I noticed that the elements in the array re-order and change style. Surprisingly, only the elements moving up have transitions applied, while the ones moving down do not. I expect all ...

div not recognizing the minimum height specified in percentage

I'm encountering an issue where one of my divs, content_wrap, is not adhering to the CSS property min-height:100% HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ...

Achieving left text alignment in CSS for an excerpt using the Ultimate Posts Widget on Wordpress

I've been trying to align the text in the excerpt of a widget called "To-Do List" on the left sidebar. I attempted to set the text-align property to left for the excerpt text, targeting the p tag within the .widget_ultimate_posts, .uw posts using CSS ...

I'm experiencing an issue where the links in my dropdown button are not showing when I hover over it. What could

I have been attempting to include a dropdown button that reveals several links when the mouse hovers over it. Despite successfully implementing the CSS for this feature, I am encountering an issue where the links are not displayed beneath the button. Afte ...

Python code using selenium syntax cannot be run in Microsoft Visual Studio Code

Python code containing selenium syntax is correctly written, however, when attempting to execute it in visual studio code, the entire script gets underlined in red. The exact cause of this issue remains a mystery. Presented below is the specific portion ...

Struggling with the adaptability of my website's footer section

I'm facing a dilemma... No matter what I do, I can't seem to position my contact form over my Google iframe perfectly. It works fine if I don't mind sacrificing responsiveness, but as soon as I try to make it responsive, the absolute assign ...

Issue with php's mysql_fetch_assoc() function

Seeking to fetch data from a function that holds my query. The retrieved data is sent back to the main page for printing using a while loop but encountering an error: Warning: mysql_fetch_assoc() expects parameter 1 to be resource, string given ...

Is there a way for me to determine if I am accurately interpreting the content on websites?

I created this function to check for any changes on a website. However, I have noticed that it produces incorrect results when tested on unchanged websites. Can you help me identify the issue and determine if there is indeed a problem? Here's the code ...

Tips for adjusting image size using media queries

How can I ensure that the image resizes correctly on smaller screens? Currently, the image spills over the container and there are gaps between the top/left of the container and the image. Should I adjust the image size in the media query or expand the con ...

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

Exploring the World of 2D Array Animation

I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif I am considering implementing CSS transitions for the movement, but I'm unsure about how to do ...

Cannot add padding to the DIV element

Here is some HTML and CSS code that I've provided. .x{ border-bottom: 1px solid #000; } .y { border-bottom: 1px solid #000; } .z li{ display: inline; padding-top: 50px; } <div class="x"> <br> <br> <b ...

Animate the jQuery menu to slide both upwards and downwards, as well as shift the inner divs to the right

I'm facing a jquery issue and could use some assistance. I am trying to achieve the following: Add a class "active" to style tags when they are active. Slide up/down vertically within a div (#information - containing "About" and "Contact"). Slide le ...

Expanding the table to display additional rows using pagination in an Angular application

I have implemented a table in Angular that displays data fetched from an API. The requirement is to initially display only the first 5 rows and provide an option for users to view more rows (in groups of 5) with pagination support. Below is the code snipp ...

Creating HTML content using Racket

Is there a straightforward method for converting X-expressions to HTML in Racket without using response/xexpr? It appears that this function is mainly intended for serving http responses, but I only need to convert Racket lists (or X-expressions) into an ...

The best way to centralize the input group in bootstrap

I attempted to center align my search bar, but it stubbornly stays to the left. Here's the code I'm using: <head> <style> html { overflow: auto; } html, body, iframe { ...