Navigating with style: Mastering the art of Bootstrap 4.1's vertical navs with the mr

Why isn't 'navs' the same as 'navbar'?

Learn more about navs here

<ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-angle-right fa-fw"></i>
                Link A
                <span class="badge badge-warning badge-pill">140</span>
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-angle-right fa-fw"></i>
                Link B
                <span class="badge badge-warning badge-pill">300</span>
            </a>
        </li>
    </ul>

Frustrated with trying to update code:

<span class="badge badge-warning badge-pill">

to

<span class="badge badge-warning badge-pill ml-auto">

but unsuccessful

Updated: Refer to @Temani Afif's answer below

If using d-flex solely results in:

The issue was resolved by adding d-flex align-items-center

cssbootstrap-4

Answer №1

To utilize the ml-auto/mr-auto classes, you must first turn the a element into a flex container by adding the d-flex class to it:

Additionally, you can center align the contents by using align-items-center, although this step is optional:

.nav {
 background:pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link d-flex align-items-center" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link A
            <span class="badge badge-warning badge-pill ml-auto">140</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link d-flex align-items-center" href="#">
            <i class="fas fa-angle-right fa-fw"></i>
            Link B
            <span class="badge badge-warning badge-pill ml-auto">300</span>
        </a>
    </li>
</ul>

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

Compress a CSS file with PHP

When using the code below to remove all newlines and spaces from a CSS file, it may cause an issue if the file contains the following: .sample { padding: 0px 2px 1px 4px; } The output will be: .sample{padding:0px2px1px4px;} However, I actually want ...

phphtmlcssregexminify

Designing a responsive two-column table layout

My current challenge involves a small table structured as a bullet list with two columns. To enhance mobile display, I am seeking a way to collapse it down to a single column: https://i.sstatic.net/LqbA6.png The current implementation includes the follow ...

htmlcssflexboxresponsive

Styling animations in React with inline styles

Exploring the world of React inline animation styling, I set out to create a toggle button. The goal was simple: when the user presses the button for the first time, I wanted a pop-up animated card to slide from left to right. On the second press, the card ...

cssreactjsanimation

Ways to alter the CSS class of individual labels depending on the content of textContent

In my HTML template, I'm using jinja tags to dynamically create labels from a JSON object. The loop responsible for generating this content is detailed below. <div class="card mb-0"> {% for turn in response %} <div class="card-he ...

javascripthtmlcssjinja2

flashing issue with bootstrap selectpicker

Can you rearrange the jQuery code and incorporate popper.js into bootstrap 4? $('.selectpicker').selectpicker(); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs ...

jqueryhtmlcssbootstrap-4

Transitioning backgrounds in a slideshow

I am attempting to create a unique slideshow effect for my page background by changing the image URL at specific intervals with a smooth fade in and fade out transition. However, I am faced with the challenge of figuring out the best way to achieve this. ...

htmlcssurlbackground

Mastering jQuery: Delegating a Toggle操作

Is there a way to implement a toggle function for an element that is generated dynamically? I am having trouble with my current code: Javascript $("body").on('click', ".buttonA", function(){ function() { ...

javascriptjqueryhtmlcss

Adjusting the width of the body container in a 2-column layout with menu padding is causing gaps to appear on the right side of

I'm having trouble getting my body div to fill the width of the page and align with the right side of my sidebar. Whenever I add padding to the sidebar, it creates blank space on the right that I can't seem to get rid of. Here is the code I am us ...

cssxhtml

Does MouseOver event not bubble up on overlapping div elements?

Employing jQuery 2.1 along with Meyer's 2.0 CSS reset script, specifically targeting IE9+ and modern browsers. In this scenario, I have created two divs that are overlapping. I have set up event listeners for both the mouseover and mouseout events on ...

javascriptcss

manipulating dropdown visibility with javascript

I'm feeling a bit lost on how to structure this code. Here's what I need: I have 5 dropdown boxes, with the first one being constant and the rest hidden initially. Depending on the option chosen in the first dropdown, I want to display the corres ...

javascripthtmlcss

CSS Class ID selection for selectpicker

I have two classes: selectpicker with different IDs: selected_Test_Platforms and selected_SIL_relevant I am trying to assign a preselection from an array called "availableTestPlatforms" to the selected_Test_Platforms. Currently, when I use the selector $( ...

javascriptjquerycsscss-selectors

Enhance your table with custom styling by incorporating the seanmacisaac table and placing the tbody within a div

I am looking to make adjustments to a Jquery sortable, searchable table created by seanmacisaac. For more information, visit the link: Does anyone know how to set the height of the tbody to a fixed value while allowing vertical scrolling (overflow-y)? & ...

javascriptjquerycssscrollhtml-table

Bootstrap 4.5 integration in jQuery builder is malfunctioning

Take a look at this jsfiddle that attempts to utilize jQuery QueryBuilder with Bootstrap 4.5 References Bootstrap CSS jQuery Library Bootstrap JavaScript jQuery QueryBuilder Plugin Here is the HTML code snippet for the builder section: <div id=" ...

bootstrap-4jquery-query-builder

How can you align elements like a poster board using CSS?

Looking to create a unique box layout inspired by this posterboard design: Currently, my boxes have fixed widths and resizable heights based on their content. However, I'm struggling to get them to stack horizontally like the example above. Any ideas ...

javascripthtmlcss

What is the best way to shorten a text using ellipses based on character count, rather than line breaks

If I have a text that needs to be trimmed down to 15 characters, like "I want to trim this text into 15 characters for example," the result should be something like "I want to limit..." in my email template. Is there a way to achieve this using just CSS? ...

css

Is it possible to make the dropdown menu content appear above instead of below?

I am exploring the possibility of using an accordion within a bootstrap dropdown that opens in an upward direction ("dropup") to have the menu expand upwards. In my attempts, I successfully integrated the "accordion" inside the dropdown, as illustrated in ...

javascriptjquerybootstrap-4dropdown

Yii2 Gridview - Horizontal Scroll Bar at the Top of the Page

I found a helpful post on Stack Overflow about creating a Yii2 Gridview with a fixed first column (Yii2 : Gridview with fixed first column), and now I'm looking to add a horizontal scrollbar at the top of the grid. My users really appreciate being ab ...

cssgridviewyii2

Tips on adjusting the height of divs in a simple layout

I'm trying to make two divs fill the page with a ratio of 70% and 30%. However, I don't want to set the size of the "html" or "body" elements. How can I achieve this without affecting the height of the text within the divs? Currently, it only dis ...

htmlcss

I'm feeling a bit lost on how to bring my random quote generator to life

I'm attempting to add animation to my random quote generator by making it look like another card is being flipped on top of the existing one, similar to a deck of cards. With limited coding knowledge, I followed a tutorial and made some adjustments to ...

javascriptcssrandomjquery-animatecss-animations

What could be causing the issue of my navbar text not changing color using CSS?

Despite several attempts, I am unable to change the color of the hyperlinks in blue or purple using the HTML and CSS below. Can anyone point out what I might be missing? nav ul { /* Navbar unordered */ list-style: none; text-align: center; backgr ...

htmlcsslisthtml-lists