Achieving the Perfect Alignment: Displaying Text and Progress Bar Side by Side using Bootstrap 5

How can I align the text and progress bar on the same line using Bootstrap 5?

  <nav class="navbar bg-light fixed-bottom">
    <div class="row m-0">
      <div class="col-12 countdown">
        <p class="text-muted d-inline pe-3">Elapsed time:</p>
        <div class="progress">
          <div class="progress-bar" ref="elaspedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            {{ minutes }} seconds
          </div>
        </div>
      </div>
    </div>
  </nav>

I have attempted to use the d-inline class, but it is not producing the desired result.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

The paragraph element and the progress division are both positioned on the same level. Using Bootstrap, you can ensure they appear on the same line by adjusting the column division to align with flex as a row. Simply add the following classes: .d-flex, .flex-row, and .align-items-center. Your updated markup should look like this:

      <div class="col-12 countdown d-flex flex-row align-items-center">
        <p class="text-muted d-inline pe-3 mb-0">Elapsed time:</p>
        <div class="progress">
          <div class="progress-bar" ref="elapsedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            {{ minutes }} seconds
          </div>
        </div>
      </div>

For a demonstration, you can view a live example at: view example

Answer №2

When incorporating a navbar into your design, consider organizing your code within a list structure, as shown in this example:

<ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><p class="text-muted d-inline pe-3">Elapsed time:</p></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <div class="progress-bar" ref="elapsedTime" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            {{ minutes }} seconds
          </div>
        </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

Padding in Bootstrap rows is not uniform

My grid template has 3 columns, but the first row in one of the columns is slightly pushed. Which CSS property should I adjust to fix this issue? Using Bootstrap framework.https://i.sstatic.net/CLSYK.png <div class="col"> <div class="col-sm"> ...

htmlcsstwitter-bootstrap

Tips for incorporating shapes and decorative elements into your page design effectively

I have searched everywhere on the internet but couldn't find an answer to this question. The question is simple: How can I add shapes or decorations to a page layout without causing it to look broken inside a responsive container? Click here to view ...

htmlcssbootstrap-5

Adapting padding based on the height of the browser to ensure optimal layout

I'm interested in adjusting the padding value of a button element based on the height of the browser window, not its width. I want to make sure that the padding adjusts proportionally to the browser window's height. Is this achievable using CSS? ...

htmlcssbrowser

React Alert: Please be advised that whitespace text nodes are not allowed as children of <tr> elements

Currently, I am encountering an error message regarding the spaces left in . Despite my efforts to search for a solution on Stack Overflow, I have been unable to find one because my project does not contain any or table elements due to it being built with ...

javascripthtmlnode.jsreactjsvalidation

Create a function that replaces items with alphabets

My goal is to create a straightforward hangman game. When a category is chosen and the "New Word" button is clicked, a random word from the selected list will be displayed as underscores. As letters are guessed and matched with those in the word, they will ...

htmlrandomhtml5-canvasdraw

React error due to setting div scroll height on component mount

In my code, there is a special div/container that contains multiple <p/> tags. The container has a reference called divRef, which is initially set to null using the useRef function. <div ref={divRef} style={styles.messageListContainer}> ...

javascriptcssreactjs

Select Menu (Code Languages:CSS, JS, HTML, BBCode)

I'm currently in the process of setting up a BB code for a forum I moderate. Here's the code snippet I'm using to generate a dropdown box that users can add to the signature field of their profiles: <!DOCTYPE html> <html> <d ...

javascripthtmlcss

Utilizing document.write to switch up the content on the page

Every time I attempt to utilize document.write, it ends up replacing the current HTML page content. For instance, consider this HTML code: <body> <div> <h1>Hello</h1> </div> and this jQuery code: var notif = document. ...

javascriptjqueryhtml

navigation bar: retain link hover state even after displaying sub-menu

My navigation bar has submenus with background images in .png format. Only 3 links in my navbar have these submenus. The issue I am facing is that when the menu link is in a hover state and the submenu is being hovered over, the nav link loses its hover st ...

javascriptjqueryhtmlcss

Modify a website link using Javascript by detecting two separate button clicks

I am seeking a way to dynamically change the src attribute of different images on a house depending on which button has been clicked. There are two groups of buttons: The types of house parts, such as windows, doors, garage, soffits, and gutters. The col ...

javascripthtml

Switching the favicon to utilize the favicon.ico file

After initially adding a favicon to my HTML page, I attempted to change it to a different one. However, the first favicon seems to be stuck and won't move, even after removing the link tag entirely. I created a new favicon (favicon.ico) and tried impl ...

htmlfavicon

Fill your HTML form effortlessly using data from Google Sheets

I am relatively new to this topic, but I'm seeking a solution to populate an Apps Script Web App HTML dropdown form with names directly from a Google Spreadsheet. At the moment, I've managed to retrieve an array of names from column A in my sprea ...

javascriptjqueryhtmlgoogle-apps-script

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

After utilizing Vue.js single file components to construct a website and appreciating the modular approach, I've encountered an issue. The browser appears to be requesting multiple versions of resources instead of just one URL for each. HeaderBar.vue ...

javascriptcssvue.jsnpmwebpack

Tips for spinning the background of a button without rotating the button itself

I'm encountering an issue while trying to rotate the background-image within my button. Instead of showing the specified background image, only the background color is visible. The photo includes a transparent section to achieve an arch-like appearanc ...

htmlcsstwitter-bootstrap-3backgroundbackground-image

Having trouble applying overlays to list items with CSS

I'm currently working on a grid gallery where I've set the List items to be 20% wide so there can be 5 in one row using float:left. Now, I'm trying to add an overlay effect by using a div with the class "overlay" so that when someone hovers ...

css

Personalized HTML characteristics

Within the realm of AngularJS (and possibly jQuery UI), I've come across tags such as ui:some_random_name and ng:some_random_name. It seems that according to the HTML specification, non-standard attributes are not allowed. So how do these libraries m ...

htmlangularjsattributes

Ensure the menu bar remains at the top of the page without using the position:

Check out this awesome fiddle here! My menu bar looks great at the top, but for some reason it won't stay in place when the user scrolls down. I've tried adding position:fixed to the CSS under the first #cssmenu, but it messes everything up. Her ...

htmlcss

Font Awesome solely alters the font size within html, rather than css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...

cssfont-awesome

Repair the masthead background during overscroll

The Dilemma At the top of my webpage, I have a sleek masthead with a captivating background image that scrolls along with the page. However, there is an issue when users overscroll upwards, causing an undesirable white overflow to appear. To rectify this ...

javascriptjquerycsstwitter-bootstrapsass

The CSS transition is failing to revert to its original state after being combined with animations

My goal is to create a loading animation using CSS transitions and animations. I have managed to achieve the initial loading effect by scaling with transition and then animating it to scale out on the x-axis. However, when attempting to transition back to ...

htmlcsscss-animationscss-transitions