Align two spans vertically in a div using Bootstrap

Struggling to create a left-hand side navigation card with Bootstrap and Bootstrap icons. The goal is to have the page name on the left and an icon on the right, but vertical alignment is posing a challenge.

Take a look at the code snippet below:

<b-list-group>
  <b-list-group-item active to="/home" class="align-items-center">
    <div>
      <span>Home</span>
      <span><b-icon-house class="float-right" /></span>
    </div>
  </b-list-group-item>
</b-list-group>

Additionally, Vue-Bootstrap is being utilized, although it should not impact this issue.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve proper alignment, it is recommended to utilize the display: flex property. You can also make use of the d-flex utility class for this purpose. Additionally, it is advised to refrain from using float and instead opt for flexbox to position the icon to the right. You can achieve this by using the utility class ml-auto.

<b-list-group>
  <b-list-group-item active to="/home" class="d-flex align-items-center">
    Home
    <b-icon-house class="ml-auto" />
  </b-list-group-item>
</b-list-group>

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

Guide to vertical centering of inline elements within an inline-block using HTML and CSS

Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...

htmlcss

Disable touch interactions on the body, only allow pinch-zoom on specific elements

I have been attempting to implement the following code: body { touch-action: none; } .left-side { touch-action: pinch-zoom; } <div class="left-side"><img src="image.jpg" /></div> The touch-action: none is functioning properly, but ...

javascriptjqueryhtmlcss

Discovering the functionality of detecting the pressing of the "enter" key within an input field that triggers the next button in Internet Explorer versions 8 through 10

My current challenge involves detecting Internet Explorer's behavior when the Enter key is pressed in an input box with a button element beside it, especially when they are not enclosed within a form element. This unique feature of IE is intriguing b ...

javascriptjqueryhtmlinternet-explorer

Issue with closing collapsed menu on click in Bootstrap version 3

Here is the code snippet: <li> <a href="#" id="statics" class="main-bar"> <span class="glyphicon glyphicon-stats" aria-hidden="true"></span> </a> </li> I am trying to toggle the responsive menu on eleme ...

jqueryhtmltwitter-bootstrap

Tips for retrieving a selected date from an HTML textbox labeled as "Date"

My goal was to find the differences between two dates by utilizing an HTML Date textbox. <input type="text" name="datein" id="datein" value="" class="inputtexbox datepicker" style="display: none" is-Date/> <input type="text" name="dateto" id=" ...

javascriptjqueryhtml

Skip ahead button for fast forwarding html5 video

One of the features in my video player is a skip button that allows users to jump to the end of the video. Below is the HTML code for the video player: <video id="video1" style="height: 100%" class="video-js vjs-default-skin" controls muted autoplay=" ...

javascriptjqueryhtml

How is it possible to encounter a Javascript unexpected token ] error within an HTML code?

While working on my project, I encountered a JavaScript error in the console of Chrome. The error message stated "Unexpected token ]" and it was pointing to a specific line of raw HTML code. I am puzzled about what could be causing this issue. Unfortunatel ...

javascriptjqueryhtmlgoogle-chrome

The div is not completely encased by the fieldset

I have utilized fieldset to generate a titled border around a div. Here is the code snippet: <div class="form-group col-xs-12"> <fieldset class="field_set col-xs-12"> <legend style="font-weight:bold;font-size:20px"> ...

htmlcssangularjs

Manipulate Input Classes by Adding and Removing Them

I am currently using masked JS in some input fields, specifically for telephone numbers. However, I am facing an issue where phone numbers can vary in length, either 10 or 11 digits. I need to switch the class based on whether a checkbox is checked. Here i ...

javascriptjqueryhtml

Steps for including variables assigned in a PHP file into a PHTML file

I am having trouble loading all the content from a phtml file into a php file Everything is functioning correctly except that the variables in the phtml file are not being loaded with their values Below is my php file <?php $firstname = $_POST[' ...

htmlphpemail-templates

What is the best way to extract information from a JSON file and display it on a webpage using

I am new to this and I have a question for everyone Here's an example of the JSON response from my URL: The JSON data returned is as follows: { "Data":{ "id": 1312, "Name": "Steem Dollars", "Symbol": "SBD", "website_slug": "steem-dollars", "Level": ...

htmljson

The issue with the min attribute for number inputs not functioning properly when using decimal

When inputting the value 3 in the field and clicking on submit in the HTML snippet below, Chrome displays an error message stating: Please enter a valid value. The two nearest valid values are 2.0001 and 3.0001. This is confusing because I have set the mi ...

javascripthtml

Why won't JQuery .ajax send my request?

I'm having trouble sending POST/Get requests using jQuery with my Python Flask server. Curl requests are working fine, and I can see regular requests hitting the server, but these ajax requests aren't making it through. Here is the code I've ...

jqueryhtmlajaxpost

Choose or deselect images from a selection

I am currently working on a feature for an album creation tool where users can select photos from a pool of images and assign them to a specific folder. However, I'm facing difficulty in selecting individual photos and applying customized attributes t ...

javascripthtmljquerycss

Optimal approach for reutilizing Javascript functions

After creating a simple quiz question using jQuery, involving show/hide, addClass, and tracking attempts, I am now considering how to replicate the same code for multiple questions. Would it be best practice to modify all variables in both HTML and jQuery, ...

javascriptjqueryhtmlcsslayout

"Step-by-step guide on adding and deleting a div element with a double click

$(".sd").dblclick(function() { $(this).parent().remove(); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="750" border="0" cellpadding="0" cellspacing="0"> <tr> <t ...

javascriptjqueryhtmlcss

Unable to open modal in browser due to HTML, CSS, and jQuery issues

I'm having trouble creating a modal window that opens when a button is clicked for user registration. The button is being clicked, but the modal window isn't appearing. Here's my code: <script src="http://ajax.googleapis.com/ajax/libs/ ...

javascriptjqueryhtmlcssmodal-dialog

Resizing an HTML table causes the background to break

I have incorporated a tailwind table with a max-width setting. In my html, I am utilizing the default Laravel Jetstream layout. However, I am facing an issue wherein the background doesn't repeat in the browser when trying to use the scrollbar on sma ...

htmlhtml-tablebackgroundtailwind-css

What steps need to be taken in order to activate the bootstrap toggle feature?

I'm having trouble getting the bootstrap-toggle effect to work on my webpage. I've simplified my page to what I believe is the minimum requirement: <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

bootstrap-4

Efficiently Organizing Data Using Coldfusion Loops in Columns and Rows

My issue lies in pulling data from a database to display on my website. I have three keys/attributes (columns) - PostedDate, DataImage, and Source that need to be shown together in one div with the posted date at the top, image in the middle, and source at ...

javascriptmysqlcsssqlcoldfusion