Troubleshooting Bootstrap 4 Button Alignment on the Right

I am a newcomer to Bootstrap 4 and I am in the process of creating a straightforward page with it. Within my navigation bar, I have successfully added a logo and company name on the left side. However, I am encountering difficulty in placing two buttons on the right side of the navigation bar. Despite exploring various suggestions on forums, none of them have seemed to effectively resolve this issue for me.

Shown below is the snippet of my HTML code: 

<nav class="navbar bg-avesta-blue">
<div class="row">
    <div class="col-sm-12">
        <a class="navbar-brand text-light" href="#">
          <img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
          <h3 class="pt-1">
          AVESTA
          </h3>
        </a>
        <div class="float-right text-right">
            <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
            <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
        </div>
    </div>
</div>

To provide you with a visual representation, here is how the current layout appears: From the image, you can see that both buttons are incorrectly aligned to the left instead of the desired position on the right side.

htmlcsstwitter-bootstrapbootstrap-4navbar

Answer №1

The Navbar supports specific content according to the documentation. Avoid using grid elements such as row>col within the Navbar. It is recommended to follow the guidelines provided in the documentation.

Placing a .row inside a flexbox Navbar may cause it to not extend to full width and instead shrink towards the left side. To ensure full-width behavior, add the w-100 class. However, adhering to supported Navbar content is the preferable approach.

"Utilize our spacing and flex utility classes for managing spacing and alignment within navbars"

Explore this example for reference: 

<nav class="navbar bg-avesta-blue">
    <a class="navbar-brand text-light" href="#">
        <img src="images/header-logo.png" class="float-left d-inline-block align-top pr-3" alt="">
        <h3 class="pt-1">
          AVESTA
        </h3>
    </a>
    <div class="ml-auto">
        <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
        <a class="btn btn-success btn-lg text-light"><i class="fa fa-usd"></i> Sell Miles</a>
    </div>
</nav>

After structuring the Navbar correctly, utilize auto-margins or flexbox utilities for alignment, as mentioned in related questions

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

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

javascriptjqueryangularjshtmldom

Troubleshooting: Bootstrap PopoverX functions failing

I've been attempting to make the bootstrap extension popover X function properly () I created a JS fiddle (http://jsfiddle.net/wp80d5ux/2/), but unfortunately, the popover doesn't appear to be loading. Here is the example I have: Could it be t ...

javascriptjquerybootstrap-4popover

`Troubleshooting Sencha Touch 2 CSS Issues`

After generating a new CSS theme and processing it with compass, the styles remained unchanged. The website still appeared identical to the original default theme. How can this issue be resolved? ...

csssencha-touchsasssencha-touch-2compass-sass

Using pixel values to define CSS gradient color stops from the end

Currently, I am working on a project involving HTML/CSS/JS where the application has a fixed size and requires precise positioning of elements according to the provided designs. Working with pixel dimensions in CSS is not a concern due to the fixed window ...

csslinear-gradients

What steps should I take to ensure that the buttons on my restaurant website are correctly displaying the overlays?

I'm currently facing an issue with the functionality of the buttons on my React.js-powered restaurant website. These buttons are located within a component called MenuButtons.jsx and are situated at the bottom of a shorter menu section on the homepage ...

javascriptcssreactjsjsx

The alignment of the background images is off

I am attempting to give a container a background image and then create two div tags using the col-md-6 classes from Bootstrap. The main div's background image is of grass texture, while the two inner divs have a skeleton of a football court as their b ...

htmlcss

Use Vue's DOM manipulation to properly surround iframes with divs

I'm facing a scenario where my Vue component displays HTML content retrieved from the database in the following format: <div id="post-body-text" class="post__main-text" v-html="postText" ...

javascripthtmlvue.jsvuejs2vue-component

"Limitation observed - function operates only on first attempt

I have been working on a map project that involves pulling information from Google about various locations using the library available at https://github.com/peledies/google-places In order to troubleshoot and identify the issue with the code related to ma ...

javascriptjqueryhtmlfunctiongoogle-maps-api-3

Is there a single function that can handle multiple sliders sharing identical options?

Currently, I am utilizing jQuery UI to generate 6 sliders with identical options for a survey. I am curious if there exists a method to merge all these sliders into one function while maintaining the ability to operate them individually? If such a soluti ...

jqueryhtmlcssjquery-ui

Utilizing the post-get method correctly within a Flask application's select form

I am attempting to utilize the select method in HTML with Flask. Below is my code: from flask import Flask, render_template, request import psycopg2 import numpy as np d = [10,12,16,17] @app.route('/demo_html', methods=['GET', 'P ...

pythonhtmlflaskpostget

Photos appearing outside the border

My current border has a vertical flow like this: https://i.sstatic.net/CdUm6.png (source: gyazo.com) However, I want the content to flow horizontally from left to right instead of top to bottom. When I apply float: left; to the controlling div, it resu ...

htmlcss

Scroll through content using buttons in JavaScript can be utilized repeatedly as needed

I want to showcase a collection of movies on my website through a horizontal, scrollable div. Since I disabled the scrollbar, users can no longer scroll, leading me to incorporate two buttons - one for moving right and one for moving left. However, the i ...

javascriptjqueryhtmlcss

Having trouble with images not displaying in IE10 on HTML5 canvas?

I recently delved into learning about html5 and the canvas element, attempting to create a basic webpage that rotates an image clockwise and counterclockwise upon button clicks. Although I managed to get it working, when I tested it on ie10, only the blank ...

htmlinternet-explorercanvasinternet-explorer-10

Is there a method available for downloading the HTML5 attribute that functions in Internet Explorer?

Is there a method to download attribute work in Internet Explorer. When attempting to force download a file on IE using The following works flawlessly on Firefox but not on IE <a href="image.jpg" download>Click here to download</a> ...

htmldownload

Innovative HTML5 Video Canvas Shapes

I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle. My preference would be to utilize a div object ...

javascriptcsshtmlvideocanvas

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

javascripthtmlcss

What is the process of generating a tree menu using data from a MySQL database?

Looking to build a dynamic menu tree using PHP and MySQL data. In my MySQL table, I have the following fields: CREATE TABLE IF NOT EXISTS sys_menu ( menu_code varchar(16) COLLATE utf8_unicode_ci NOT NULL, menu_name varchar(64) COLLATE utf8_unicode_ci ...

phpmysqlhtmlmenu

Tips on moving information from one form to another after referencing the original page using Javascript and HTML

Imagine this scenario: A page with three text fields, each with default values. There is also a hyperlink that performs a database lookup and returns parameters to the same page where the hyperlink was clicked. The goal is for the text boxes to be automa ...

javascripthtmlperl

Modifying the Vue page background directly from a page: a step-by-step guide

UPDATE: I recently discovered that I need to modify the body background-color, but I am unsure of how to accomplish this from within the style of this page based on the wrapper's class. The class is determined by the data values. I aim to change the ...

cssvue.jsvuejs3

Adjust the height of each table's data cell dynamically based on the content within

I have a table in HTML with a cell that contains 2 divs and a radial tab strip. Here is an example: <td> First td </td> <td> Second td <div> .... <div style="border: solid; border-color: brown; border-width: 3px; he ...

htmlcssdynamichtml-tableautogrow