Can the navbar brand be centered in Bootstrap 4 while also aligning some text to the left of the brand?

Just dipping my toes into website coding and Bootstrap is a whole new territory for me. I'm struggling with centering the brand in the navbar while keeping the text aligned to the left of it. So far, every attempt results in both elements being centered. What I really want is for the brand to always stay in the middle.

<nav class="navbar navbar-expand-md flex-column">
    <div class="container justify-content-center flex-row navbar-expand-md">
        <a href="/index.html" class="navbar-brand">VIRAL BEAUTY</a>
        <h4>Beauty Products As Seen On YouTube</h4>
    </div>
</nav>

--

nav{
  height: 6vh
}

.navbar-brand{
  border: 2px #FA5DB1 solid;
  padding: 5px 10px;
}

.navbar-brand:hover{
  text-decoration: none;
  color: #FA5DB1;
  cursor: pointer;
}

.navbar a{
  text-decoration: none;
  color: #FA5DB1;
  font-weight: 500;
}

.navbar h4{
  font-size: 12px;
  margin: 0;
}

PS: Still figuring out how to properly paste my code, so apologies for any confusion.

htmlcssbootstrap-4navbarcenter

Answer №1

Utilizing flexbox in Bootstrap 4's navbar allows for easy centering of the brand name or any desired text. By simply adding mx-auto to the element, you can achieve perfect alignment without the need for floats on left and right menus.

<nav class="navbar navbar-expand-md navbar-fixed-top navbar-dark bg-dark main-nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Hair Products</a>
            </li>
        </ul>
        <ul class="nav navbar-nav mx-auto">
            <li class="nav-item"><a class="nav-link" href="#">VIRTUAL BEAUTY</a></li>
        </ul>
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact Us</a>
            </li>
        </ul>
    </div> </nav>

You can see the resulting navbar layout in this image reference.

To ensure accurate centering within the viewport, regardless of navigation bar ends, you can utilize the following CSS code snippet using absolute positioning:

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); }

For a clearer understanding and practical examples, visit these links:
Centering navbar with mx-auto -
Navbar centering with absolute positioning -

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

Nuxtjs app experiences compatibility issues with Bootstrap templates

Greetings to all who come across this issue. I am currently working on a project using Nuxt.js with the Bootstrap template. The header and footer are displaying correctly, but the problem lies in the design of the body not showing up. https://i.stack.imgu ...

vue.jsbootstrap-4nuxt.js

Arrange Drifting Components in a Fluid Layout Grid

I am in the process of creating a unique sticky note website where I want to arrange the notes in a grid format. As the window size decreases, the notes should automatically reorganize to fit the width and allow for vertical scrolling. My goal is to achiev ...

htmlcss

Bootstrap 4's container overflowing feature

I am trying to create a container with both horizontal and vertical overflow using the "auto" value. I want the content inside this container, which will mainly consist of large tables, to be scrollable within a window. It would be ideal if this container ...

cssbootstrap-4overflow

I am developing a JWT authentication and authorization service for my Angular application. However, I am running into issues when trying to implement observables

I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...

htmlangulartypescriptangular-materialjwt

When the menu active item is clicked, the header will automatically scroll to the top

I've implemented a sticky header using CSS and JavaScript along with a mega menu. However, I've encountered an issue where when scrolling to the bottom and clicking on the "more" link in the dropdown, the page scrolls back to the top. This is the ...

javascriptcss

Scrolling seamlessly within a container that is fixed in position

For hours, I've been attempting to incorporate smooth scrolling into my project with no success. The issue lies in the container where the anchor tags are located. If it's set to fixed position or absolute, none of my attempts seem to work. In ...

javascriptjqueryhtmlcss

What is the best way to eliminate alternative styling from a chart component in C#.NET?

I've encountered an issue with a stacked chart component on a c#.net webform from the MS Chart Control Library. Initially, I dragged the control onto the design surface and then proceeded to edit the source html (.aspx page) to assign the element a cs ...

asp.netcss

The applet failed to load on the HTML webpage

I'm having trouble getting this applet to load on an HTML page. I've already added full permissions in the java.policy file and I'm using the default HTML file from NetBeans Applet's output. /* Hearts Cards Game with AI*/ import java.a ...

javahtmlapplet

CSS - Organization of Rows and Columns

I am in the process of designing a website that will feature news content, and I would like to give it a layout similar to a reddit news box. The layout would resemble the following structure. I am using angular material and CSS exclusively, without any fr ...

htmlcss

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

c#htmlcssasp.netimage

Having trouble with your HTML iFrame not functioning properly?

My code is not working as expected and I'm puzzled by it. It was working fine yesterday but now it's giving me trouble. <iframe allowfullscreen="" allowtransparency="true" frameborder="0" height="2000" scrolling="no" src="http://www.google.co ...

javascripthtmliframe

Can you explain the meaning and purpose of <meta charset="UTF-8"> tag in

Meta charset="UTF-8" serves as a condensed symbol system for representing information in a more concise and practical manner: The coded message was carefully crafted. ...

html

Toggle the visibility of multiple divs by clicking on other divs

I have implemented a script on my webpage to toggle the visibility of certain divs by clicking on anchor tags. I found a solution that seems perfect for my needs, but unfortunately it is not working when I try to integrate it into my own website. I suspec ...

javascriptjqueryhtml

What is the reason behind Object.hasOwn(x,y) being different from Reflect.ownKeys(x).includes(y) when x represents a CSSStyleDeclaration object and y is a hyphenated property such as 'z-index'?

Both of these conditions are true: 'z-index' in getComputedStyle(document.body) // true Reflect.has(getComputedStyle(document.body), 'z-index') // true Additionally, the following statements also evaluate to true, indicating that &apo ...

javascriptcss

Keeping the header in place: fixed positioning

This particular situation is quite challenging for me. I have a webpage that requires horizontal scrolling. There is a menu at the top of the page that needs to remain centered on the page at all times. Even with the use of jQuery, I am uncertain how to ac ...

htmlcsspositionfixed

Pagination of AJAX result on the client side using jQuery

My issue revolves around pagination in AJAX. I want to avoid overwhelming my search result page with a long list of returned HTML, so I need to split it into smaller sections. The Ajax code I am currently using is: $.ajax({ url: "getflightlist.php?pa ...

javascriptphpjqueryhtmlajax

Center the first column in jQuery Datatables

Looking to center-align only the first column named "Status": $("#TransactionTable").DataTable({ ajax: { url: '/Transaction/SearchMockup', type: 'POST', data: { ...

jqueryhtmlcssdatatables

When I open my website in a new tab using iOS and Chrome, the appearance of the absolute element is being altered

I am experiencing an issue with a div that is positioned absolutely at the bottom left of my website. When I open the site in a new tab using <a target="_blank" href="./index.html">, the bottom value is not being applied correctly ...

javascripthtmlcss

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Normal text links are present: <a href="projects.html">Projects</a> Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'? a { font-size: 50px; ...

htmlcss

Unable to make a POST request using axios

I'm having trouble populating a table using vue.js and axios in my visual studio project. Every time I run the solution, I see an empty table with just the heading Title. I experimented with another POST request method but unfortunately, it didn&apos ...

c#htmljsonvue.jsaxios