When trying to center the <ul> element in Bootstrap using justify-content-center within a row, it seems that the alignment isn't quite right

Here is my code (only body)

  <body>
    
    <div class="container-fluid">

      <div class="row">

          <ul class="nav justify-content-center nav-tabs"> 
            <li class="nav-item"> 
              <a class="nav-link" href="/home.php">Home</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/login.php">Log In</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/logout.php">Log Out</a> 
            </li> 
          </ul>
     

      </div>
    </div>


  </body>

Display :

https://i.sstatic.net/z2EAX.jpg

I was able to successfully center the ul by removing the row element. However, I am still puzzled by why the behavior changed when the row was present in my code.

EDIT :

If i remove row from the code, I could use justify-content-center on ul.My question however still stands as I could not explain the behavior when row is present

<body>
    
    <div class="container-fluid">

  
 
          <ul class="nav justify-content-center nav-tabs"> 
            <li class="nav-item"> 
              <a class="nav-link" href="/home.php">Home</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/login.php">Log In</a> 
            </li> 
            <li class="nav-item"> 
              <a class="nav-link" href="/logout.php">Log Out</a> 
            </li> 
          </ul>
     

    </div>

</body>

https://i.sstatic.net/AjqDa.jpg

htmlcssbootstrap-4

Answer №1

Consider this alternative approach:

Primary Technique

To center-align the <ul> element, simply add flex-basis:100%; to the ul CSS selector.

ul{
  flex-basis:100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
    <div class="container-fluid">
      <div class="row">

        <ul class="nav nav-tabs justify-content-center"> 
          <li class="nav-item"> 
            <a class="nav-link" href="/home.php">Home</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/login.php">Log In</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/logout.php">Log Out</a> 
          </li> 
        </ul>

      </div>
    </div>
  </body>

Secondary Technique

Alternatively, you can apply justify-content-center directly to the row class to achieve a centered alignment of the <ul> element without modifying the <ul> tag itself. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
    <div class="container-fluid">
      <div class="row justify-content-center">

        <ul class="nav nav-tabs"> 
          <li class="nav-item"> 
            <a class="nav-link" href="/home.php">Home</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/login.php">Log In</a> 
          </li> 
          <li class="nav-item"> 
            <a class="nav-link" href="/logout.php">Log Out</a> 
          </li> 
        </ul>

      </div>
    </div>
  </body>

Answer №2

When trying to center the ul, remember that it's not enough to simply use .justify-content-center as this will only center the child li elements within the ul. To properly center the entire ul, you need to apply .justify-content-center to the parent element of the ul (the row div).

Answer №3

give this a shot:

<div class="row">

    <ul class="nav justify-content-center nav-tabs" style="display: flex; justify-content: center;">
        <li class="nav-item">
            <a class="nav-link" href="/home.php">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/login.php">Log In</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/logout.php">Log Out</a>
        </li>
    </ul>

</div>

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

Generate HTML table with CSS dynamically applied through jQuery

After performing some calculations and applying CSS rules using the .css() function in jQuery to color the background of a table, I am facing an issue when trying to print the page. The printed page appears in black and white without retaining any styling ...

javascriptjqueryhtmlcssdatatables

Accessing new information seamlessly without the need for page refresh

For optimal mobile viewing of my website, I am considering implementing a select element. Here are the available options: HTML: <select name="select-choice-8" id="select-choice-nc"> <optgroup label="News"> & ...

javascriptjqueryhtmlajaxoptgroup

I am unable to retrieve data using JavaScript

I am struggling to fetch data with JavaScript and display it in the console. Can anyone point out what I might be doing incorrectly? main.js // ADD TO CART $("#addToCartBtn").on('click',function(){ var _qty=$("#productQty") ...

javascripthtmldjangodjango-templates

What is the correct way to effectively target nested elements using CSS?

For a while now, I've been creating websites using HTML and CSS, carefully matching specific tags to my classes or IDs. However, I recently noticed a trend where people use selectors like #test > #blah to indicate that #blah is nested inside of #te ...

htmlcssnested

Tips for implementing cellRenderer in ag-grid table using React JS

Using the react js ag-grid method, I created a table and then passed my json data into the React table. The json file data is as follows: { "posts": [{ "cam1": "3 persons, 1 car, 1 bottle, 2 chairs, 1 tv", "cam ...

javascriptcssreactjsjsondatatable

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

I am looking to open all content within a specific <div> in a new tab (target="_blank"). I am open to any solution, whether it involves JS, CSS, HTML, classes, IDs, etc. I experimented with using <base target="_blank">, but it affect ...

javascripthtmlcsstarget

Why is applying CSS on an li element using .css() in JQuery not functioning?

Hey there! Could you please review my code? I'm attempting to add a top position to the <li> element using a variable in jQuery, but I'm not sure how to do it. Here's the code: <script> $(document).ready(function(){ ...

javascriptjquerycss

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

I have noticed that all Premium posts contain an element with the class ="svgIcon-use" <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.090 123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 ...

javascriptcss

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

javascripthtmlforms

What is the best way to apply a class to the initial div using jquery?

I have the following HTML code: <div class="main"> <div class="sub"></div> <div class="sub"></div> <div class="sub"></div> </div> <div class="main"> <div class="sub"></div> <di ...

jqueryhtml

Center an image vertically within its container

Here is an example of some HTML/CSS code: .section { width: 100%; height: 200px; overflow: hidden; } .section img { max-width: 100%; height: auto; } <div class="section"> <img src="http://www.example.com/image.jpeg" alt="image" /> ...

htmlcss

Modify particular HTML data attribute

I am attempting to modify a specific html data attribute on the website "" using css and jquery, but I am struggling to make the changes successfully. My attempts to edit the attribute data-i18n="[title]tt.navigation_cube_control" have been unsuccessful ...

javascripthtmlcssattributescustom-data-attribute

Preventing SVG colors from changing upon clicking a specific region

I need help with maintaining the color of my SVG map without it changing after clicking on an area. The issue is that it ends up looking like a hyperlink even after being visited. .mapdiv { max-width: 45%; height: auto; margin: auto; width: auto; stroke: # ...

csssvg

Is it possible to integrate a GWT library into Dart programming?

Considering migrating to Dart, but unsure of its maturity. Can a library originally written in GWT be used in Dart? ...

javajavascripthtmlgwtdart

AngularJS incorporating dynamic stylesheets

I am facing a challenge with my AngularJS application as it fetches data via an API and dynamically builds a webpage. Typically, I rely on ng-style for dynamic styling, but now I need to utilize the nth-of-type attribute which can only be applied in a CSS ...

cssangularjs

Container Fluid height not fully supported in ASP.Net webpage

Despite attempting a solution from this source, I am still encountering an issue. My ASP.net page layout looks like this: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <%@ Page ...

htmlcssasp.nettwitter-bootstrap

The JQuery.hover() function is experiencing issues with detecting hover events while moving the mouse over

While attempting to enhance the functionality of hovering over a 2048 tile, I encountered an issue. Each tile with a value of n is assigned a class 'tile-n'. Specifically for the basic 'tile-2' tile, I have written hover functionality ...

javascriptjqueryhtmlcsshover

There seems to be an issue with how Gmail is rendering HTML text

I developed a script that automatically sends HTML email messages to users. However, I've encountered an issue with the font color in Gmail. The first message displays correctly, but subsequent messages in the conversation appear in purple. This prob ...

phphtmlgmail

The ineffectiveness of setting width to 0

When I set @media screen and (max-width: 700px), aside {width: 0}, it doesn't disappear. Even after resizing the window, it remains as null space with width: 52px. What could be causing this issue and how can I resolve it? * { margin:0; padding ...

javascripthtmlcss

Ensuring that the contents hidden by overflow:hidden remain truly concealed

When applying overflow: hidden; to a div, I have encountered situations where keyboard actions can still cause the div to scroll, even without visible scrollbars. This makes it difficult to return the div to its original state. Are there any additional ste ...

htmlcss