Align navigation tabs in the center for large screens and in the collapsed navigation bar for smaller screens

I have a navigation bar with multiple tabs. When the screen size is reduced, these tabs disappear and are condensed into a clickable button called navbar-collapse, which expands to display the tabs in a vertical orientation. I managed to center the elements in the dropdown using text-align: center, but this alignment does not apply to the tabs when the navigation bar is full-size. Is there a way to center the tabs both in full-size view and on mobile devices (in the dropdown)? Here's the JSFiddle link for reference: http://jsfiddle.net/sushiknives/c1zjbrmj/

A quick note about the JSFiddle: you will need to drag the result page far left to see how it would appear in full-size.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To achieve this layout, you can utilize the nav-justified class...

<ul class="nav nav-justified">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Suppliers</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Location</a></li>
</ul>

Check out the live demo here:

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

Tips for customizing the base font size in a Bootstrap 4 template

My Java/Spring Boot webapp utilizes Thymeleaf HTML page templates and Bootstrap 4, with the foundation being a free Bootstrap 4 site template called 'Simple Sidebar': . The current setup is functioning smoothly for me. I am interested in adjusti ...

csstwitter-bootstrapbootstrap-4

Can you explain the significance of polyfills in HTML5?

What exactly are polyfills in the context of HTML5? I've come across this term on multiple websites discussing HTML5, such as HTML5-Cross-Browser-Polyfills. Essentially, polyfills refer to tools like shims and fallbacks that help add HTML5 features ...

javascripthtmlfallbackpolyfillsshim

Trigger event once the component has finished construction

I have integrated jqTree into my project following these steps: Adding 'p' elements with the '.root' class dynamically to the page. Calling jqTree for each of the 'p.root' elements when a button is clicked. Adding an id afte ...

jqueryjsonjqtree

Looking to utilize the <pre> tag without any external CSS styles defined in a separate stylesheet?

In my current project, I am using bootstreap v3.2. I am facing an issue where I need to display fetched content from the database on a page using the <pre></pre> tags. However, the problem is that the content is being displayed with the default ...

htmlcss

AngularJs promise is not resolved

Before processing any request, I always verify the user's authorization. Here is the factory code that handles this: (function() { angular.module('employeeApp').factory('authenticationFactory', authenticationFactory); fun ...

javascriptangularjs

Implementing a Slide animation in React

I am currently working on a carousel feature that includes two buttons, Next and Previous. When the user clicks on Next, I want the carousel to slide from left to right, and when they click on Previous, it should slide from right to left. One important not ...

cssreactjscss-animations

What is the best way to access the references of 'child controllers' in NavigatorIOS within a React Native app?

After diving into react-native for the past few days, I've encountered a dilemma regarding the NavigatorIOS component. Is there a way to access and manipulate 'child controllers' of NavigatorIOS similar to how it's done in native object ...

javascriptiosnavigationreact-native

What's the best way to ensure images and videos in a div maintain their aspect ratio when resizing?

Is there a way to make the image and video fit inside the div without altering the aspect ratio? The code snippet below is what gets displayed on my website, utilizing bootstrap for responsiveness. <div id="micropost-208"> <di ...

javascriptjqueryhtmlcsstwitter-bootstrap

Use ASP.NET MVC to pass data from an action to an AJAX call and utilize it in the success function

I have a custom ResultOfOperation class that I use to retrieve details about an activity: public class ResultOfOperation { public string Message1 { get; set; } public string Message2 { get; set; } public string Message3 { get; ...

javascriptjqueryajaxasp.net-mvc

Breaking down an array into groups - where did I go wrong in my code?

Check out the following code : function splitArrayIntoGroups(arr, size) { // Splitting the array into groups. var newArray = []; for(var i = 0; i < arr.length; i++){ for(var j = 0; j < size; j++){ newArray.push(arr.splice(0, size)); ...

javascriptarraysalgorithmloopslogic

Is there a way to retrieve a large number of users through an API using async await?

I am trying to retrieve all users from an API and I want to identify which user receives the highest payment. For instance let users=['tom','jenny','smith','Joe'] async function getUsers() { let response = awa ...

javascriptnode.jsrestfetch

Use jQuery to dynamically insert content after an input element, and then remove that added content

I am looking to dynamically add an <em> tag after a textbox if the user inserts a non-numeric format. $('.numeric').keypress(function (e) { var key_code = e.which; if (key_code != 8 && key_code != 0 && (key_code < 48 | ...

jquery

How can I securely save a user's login information using ExtJS without saving it multiple times?

Currently, I am utilizing Ext.Ajax.request() to access a PHP page that provides user-specific information during the login process. In order to store variables such as cookies and session information in ExtJS, I have created a model with necessary fields a ...

phpjavascriptextjsauthentication

Using AngularJS: Verify the presence of a key/value pair in an object and create an array of objects

My current service method retrieves income data from different projects and creates a new array of objects. I am seeking assistance to sort this array by year and trimester in order to simplify looping through it using ng-repeat in the view. The data stru ...

javascriptarraysangularjs

Managing class values with Selenium - Manipulating and updating classes

In the program I'm working on, there is a need to toggle which element receives the class value of "selected". <div class="countryValues"> <div data-val="" >USA and Canada</div> <div data-val="US" >USA - All< ...

pythonhtmlseleniumclasstags

Disregard the "return" key and shift the focus to the next position after every 5 characters inputted in the

I have a project where the client requires scanning a barcode that includes an invoice number with 5 digits, followed by pressing 'enter'. I am looking for a way to make the input box ignore the 'enter' key and automatically move focus ...

javascriptjqueryhtml

How can I maintain only one Bootstrap accordion panel open at a time while utilizing the hashchange event and click event?

I am experimenting with Twitter Bootstrap and using the accordion and jQuery plug-in hash change plugin. I am facing an issue where if I open a page using location.hash and click on other items multiple times, the previously opened item cannot be toggled c ...

jquerytwitter-bootstrapaccordionhashchange

Receiving output from a JavaScript function:

Can this snippet be used in JavaScript without any negative consequences? function Individual() { this.name = function() { return; } } ...

javascript

Determine the necessary adjustment to center the div on the screen and resize it accordingly

Currently, I am in a situation where I must develop a piece of code that will smoothly enlarge a div from nothing to its final dimensions while simultaneously moving it down from the top of the screen. Each time this action is triggered, the final size of ...

javascriptmathhtmlzoomingslide

How to Add Data from Another MongoDB Collection in Mongo/Meteor

I am looking to incorporate a document from one collection into another, specifically a UoM into Products. Template.NewProduct.helpers({ ... uoms: function() { return UoM.find(); }, ... }); Template.NewProduct.events({ //Submit and Add to ...

javascriptnode.jsmongodbmeteormeteor-blaze