How to float two divs using flex in Bootstrap 4

I'm having trouble floating two divs within a row or container div. Despite using the classes .justify-content-md-start and .justify-content-md-end, the divs remain next to each other without any float.

I've also tried using classes like float-left and float-right, but encountered the same issue.

<div class="container kategoria_page_info_2">
    <div class="row">
        <div class="d-flex align-items-center">
            <div class="justify-content-md-start"><span class="category_page_count_">There are a total of 7 products in this category.</span></div>
            <div class="justify-content-md-end">
                <form method="get" name="listing_items">
                    <select class="form-control" onchange="listing_items.submit()" name="order">
                        <option value="id_desc">Newest Products</option>
                        <option selected="selected" value="id_asc">Oldest First</option>
                        <option value="nev_asc">Name, A – Z</option>
                        <option value="nev_desc">Name, Z - A</option>
                        <option value="price_asc">Price Low to High</option>
                        <option value="price_desc">Price High to Low</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
</div>

My goal is to position the .justify-content-md-start div on the left side of the row and the justify-content-md-end div on the right side of the row.

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

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Make sure to include the class .col-md-12 and .justify-content-between

<div class="container kategoria_page_info_2">
    <div class="row">
        <div class="col-md-12 p-0 d-flex align-items-center justify-content-between">
            <div class=""><span class="category_page_count_">There are total of 7 products in this category</span></div>
            <div class="">
                <form method="get" name="listing_items">
                    <select class="form-control" onchange="listing_items.submit()" name="order">
                        <option value="id_desc">Newest Products</option>
                        <option selected="selected" value="id_asc">Oldest First</option>
                        <option value="nev_asc">Name, A – Z</option>
                        <option value="nev_desc">Name, Z - A</option>
                        <option value="price_asc">Price Low to High</option>
                        <option value="price_desc">Price High to Low</option>
                    </select>
                </form>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/lalji1051/7s5fuxpg/1/

https://jsfiddle.net/lalji1051/rqjdhm4L/ Check out the updated version

Answer №2

To align items in a flex container, you can use the classes .w-100 on the flex container and .mr-auto on the element you want to push to the right. You can also utilize .justify-content-md-start and .justify-content-md-end for horizontal alignment. For more examples, refer to the Bootstrap 4 documentation.

<div class="container kategoria_page_info_2">
    <div class="row">
        <div class="d-flex align-items-center w-100">
            <div class=""><span class="category_page_count_">There are a total of 7 products in this category.</span></div>
            <div class="mr-auto">
                <form method="get" name="listing_items">
                    <select class="form-control" onchange="listing_items.submit()" name="order">
                        <option value="id_desc">Newest Products</option>
                        <option selected="selected" value="id_asc">Oldest First</option>
                        <option value="nev_asc">Name, A – Z</option>
                        <option value="nev_desc">Name, Z - A</option>
                        <option value="price_asc">Price Low to High</option>
                        <option value="price_desc">Price High to Low</option>
                    </select>
                </form>
            </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

Headers with a 3 pixel stroke applied

I have a design on my website that includes a 3px stroke around the header text to maintain consistency. I don't want to use images for this due to issues with maintenance and site overhead. While I know about the text-stroke property, browser suppor ...

javascriptjqueryhtmlcss

Issue with collapsed navbar button functionality in Bootstrap version 5.1.3

Issue with Bootstrap 5 Navbar Collapse Functionality The navbar collapse button is not working on my PC. The button appears but when clicked, the navbar does not show up. Surprisingly, when I test the code on Codeply (without linking to Bootstrap 5 and ot ...

javascripthtmljquerybootstrap-5

The timeline shows the movement of the jQuery object

I currently have a timeline bar that looks like this: <div class="plan-bar main-gradient"></div> https://i.stack.imgur.com/ybJar.jpg My question is, how can I make the red box move in real-time along this timeline bar? Thank you for your hel ...

javascriptjqueryhtml

Using both .table-active and .table-stripped simultaneously will cause conflicts and not work properly

I have a .table-striped table and I want to highlight some rows in it. I am using the .table-active class, but it only works in about half of the cases - specifically when the row has a 'white stripe' background. Is there a way to highlight rows ...

twitter-bootstrapbootstrap-4bootstrap-5

Utilize Bootstrap multi-select buttons and listen for a 'click' event

My goal is to implement Bootstrap 4 buttons that act as indicators for user choices on a webpage. These buttons should toggle between selected and unselected states, and I need to be able to track their state changes in real-time. Currently, I am using the ...

jquerybootstrap-4

Run Python scripts on imported files

I am facing an issue with my django application where I need to upload 2 files and run a python script (proto2.py) on them. In the HTML code, I included a button to trigger the file execution but it did not work: <div>Relay 1: <form action=" ...

pythonhtmldjango

Verify whether the content within the Div has been modified

I am currently making changes to content within a <div> element. I would like to determine if the data in the <div> has been modified and, if so, save it in a session to persist on refresh. How can I verify if the data has been edited and then ...

javascriptjqueryhtmlcss

Substitute the images with links provided in an external text file

I have a function that I use to replace avatars of players with custom images. Currently, I have three replacement links hardcoded into a Chrome extension. However, I want the function to read an external txt file to dynamically build an array so that I ca ...

jqueryhtmljson

Animation of two divs stacked on top of each other

I am trying to replicate the animation seen on this website . I have two divs stacked on top of each other and I've written the following jQuery code: $('div.unternehmen-ahover').hover( function () { $('div.unternehmen-ahover' ...

javascriptjquerycsshtmlslider

CSS styles are not being applied correctly to the Bootstrap modal in combination with Leaflet

After importing leaflet-bootstrapmodal.js into my project, I am facing an issue with styling it. Take a look at the plugins listed below: <!-- Bootstrap modal--> <link rel="stylesheet" href="bootstrap-modal/bootstrap ...

javascripthtmlcssbootstrap-4leaflet

Trouble accessing files in the assets folder of Angular 2

I am encountering a 404 error when attempting to access a local file within my application. I am unable to display a PDF that is located in a sub-folder (pdf) within the assets folder. I am using CLI. <embed width="100%" height="100%" src="./assets/pdf ...

htmlangular

Is CSS the only way for Python Selenium to locate an element?

My attempt to log in to the Apple website using Selenium has hit a roadblock. When I try to locate the 'sign-in button' using find_element_by_id, an error pops up indicating it's actually a CSS selector. What exactly does that imply? I was ...

pythonhtmlselenium

Is it beneficial to use both Bootstrap and ng-bootstrap together?

I have two modules in my angular website - "bootstrap" and "ng-bootstrap". Do I need both or just one? I am thinking of keeping only "ng-bootstrap" 4.0.0.0 and removing "bootstrap". Is this acceptable? What are the steps to remove "Bootstrap"? Can I simp ...

javascriptangularbootstrap-4ng-bootstrap

Switching out text when hovering with Jquery or JavaScript

Is there a way to use jQuery or JS to make the text and icon disappear when hovering over a div, and replace it with "Read More"? I've looked at some guides but they only remove one line of text instead of clearing the entire div and displaying "Read ...

javascriptjqueryhtmlcss

What is the reason that styled() does not apply styles to the Material-UI <TextField /> component?

I've managed to figure out a solution, but I'm curious about why this code is working: <TextField label='Zip Code' size='small' InputProps={{ style: { borderRadius: '.4rem' }, }} sx={{ width: & ...

cssreactjsmaterial-uistyled-components

Display stylish Instagram-like dots in the slick slider

Currently, I am utilizing the slick slider to display numerous slider items. Additionally, I want to include dots to indicate the position of the items. However, there are too many dots visible at once, and I wish to display them similarly to how Instagram ...

jquerycsstwitter-bootstrapbootstrap-4slick.js

In AngularJS, the event handler does not receive the current input value that is being passed

<div ng-repeat="item in groups"> <p hidden><input type="hidden" value="{{item.id_group}}" /></p> <p><textarea>{{item.description}}</textarea></p> <p> <a href="" ng-click="editGrou ...

htmlangularjs

Trouble with the visibility of the Bootstrap navigation bar menu icon

I am currently utilizing Bootstrap's navigation bar, and I have configured a menu icon. However, when I resize the browser window to a smaller size, the navigation bar functions properly but the icon does not appear. HTML: <nav id="navigation ...

htmlcssbootstrap-4

Issue with importing CSS in Pug-Template

Looking to develop a Website using node.js and express with Pug as the template language, incorporating Bootstrap CSS. However, encountering an issue where Pug is not importing my custom CSS but is successfully importing Bootstrap CSS. Experimented with d ...

htmlcsspug

What is the best way to stack a canvas box on top of another canvas box?

My goal is to have two canvas squares stacked on top of each other. While I am familiar with drawing on canvas, I need assistance in placing one canvas on top of another. Despite my attempts at setting the position, I have not been successful. <canvas ...

javascripthtmlcss