starter tablets

Currently, I am using Bootstrap pills for my navigation bar. However, I am experiencing an issue where the active pill is not displaying with a blue background color as it should according to the default Bootstrap styling. Here is my code:

<div style="margin-left: 15px;margin-bottom: 15px;margin-top: 10px;">
    <ul class="nav nav-pills">
        <li class="active">
            <a href="index.php">Home</a></li>
        <li class=""><a href="Project.php">Projects</a></li>

        <li class=""><a href="#">Employee</a></li>

        <li><a href="#">Forum</a></li>


    </ul>
</div>

You can view the output here.

It seems that only the home pill is currently in focus.

csstwitter-bootstrap

Answer №1

Insert the following code within script tags:

$(document).ready(function(){
   $(".nav-pills li").click(function(){
       $(".active").removeClass("active");
       $(this).addClass("active");
   });
});

DEMO

Answer №2

Your JSFiddle is functioning as intended based on the feedback provided. The pill with the .active class will display a blue background.

However, it seems you may be expecting the pill to automatically activate when clicking on a link. This is not the default behavior.

To achieve this functionality, you can dynamically generate the menu and assign the active class during generation or utilize JavaScript to assign the active class on each page load for the correct menu item. It may be helpful to use IDs for the list items for easier implementation:

For example, if you click on the second menu item, on the Projects.php page, you could incorporate the following jQuery code:

$('#project').addClass("active");

This assumes that the menu items have been assigned IDs.

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

Avoid the wrapping of text below the icon

I am currently working on compiling a list of items, each requiring an icon to be displayed on the left-hand side. However, I have noticed that for items with long names, the text wraps under the icon which is not the desired outcome. Is there a way to pre ...

htmlcsstwitter-bootstrap

Create a JavaScript timer on a PHP file that sets the input and textarea styles back to their default

When I use a timer in a JavaScript file after submitting a form to insert data into a MySQL database via PHP, the style of the textarea and input elements changes back to default. This issue only occurs when the timer is active. I tested submitting the fo ...

javascriptphphtmlcssmysql

Arranging li elements using grid placement

I'm facing some difficulty with aligning my li elements properly within rows. Despite trying various approaches, including using nth-child selectors and IDs for testing purposes, I am still unable to resolve the issue as expected. #section2 { w ...

csscss-grid

A program designed to automatically upload images

I'm currently working on a website project that showcases various events. Here is a sneak peek: https://i.sstatic.net/W3a4U.jpg While I can customize the HTML and CSS to add more events similar to the one shown above, it becomes tedious having to ma ...

javascripthtmlcssbootstrap-4

The tab-width property in CSS allows you to specify the

Are there methods in WebKit and Microsoft browsers to specify tab width as in Firefox and Opera with -moz-tab-size and -o-tab-size properties? For instance, I would like the tabs in my <textarea> to be 4 spaces wide: textarea { -moz-tab-size: 4 ...

csstabscross-browser

The webpage is completely blank, displaying only a stark white screen

After designing a website, I encountered an issue where upon opening it in the browser, it only shows a blank white page. I am puzzled as to why this is happening. Could you please take a look at this link and assist me? Thank you in advance. ...

javascripthtmlcssbootstrap-4

Firefox causing images to have a white border after rendering

My image (.png) has a white border only in Firefox, despite the CSS border property being set to 0. Is there a solution to remove this unwanted border around the image? ...

cssfirefox

Fixing horizontal overflow with Bootstrap 4 row

Can anyone help me figure out why there is a white space appearing on the right side of my page when I create a row? I've tried various solutions without any success. Here is the CSS code I am using: .special-header { margin-top: 50px; } .special- ...

htmlcssbootstrap-4

Center align with padding on all sides

I'm trying to align the elements so that they all line up perfectly without any extra spacing. I've used justify-content: center to center the elements, but they end up looking like this. enter image description here However, I want everything ...

htmlcss

Issue with Bootstrap Navbar-Toggle Functionality in ASP.NET with Visual Studio 2010 Not Resolving

After installing a NuGet package, I proceeded to install Bootstrap which created the following folders: Contents containing Bootstrap CSS files Scripts containing .js files In the header of my Master Page, I included the scripts like this: <scrip ...

jqueryasp.netcsstwitter-bootstrap

An issue is being caused by altering the custom.scss.css file in Rails

After following the tutorial by Michael Hartl (), I encountered an issue when trying to modify some CSS functions in the custom.scss.css stylesheet. Every time I make a change, such as adjusting the margin from 10 px to 11 px, I receive this error in my br ...

cssruby-on-railstwitter-bootstrap

"Use jQuery to seamlessly alter the CSS clip-path property for smooth transitions

I have an element that utilizes css clip-path. By using jquery, I am able to adjust the clip-path points based on the cursor's X-coordinate position. While my code functions well, I am looking to add a smoother and slower transition to this "animatio ...

jquerycssmousemoveclip-path

Ensuring Consistent Image Resolution Across Multiple Servers Using Cloudinary in Rails

In my app, I have a search page filled with results from scraped content. Each result includes an image sourced from an external URL. My goal: To ensure that each image has the same size and can be placed within Bootstrap's grid system. <%= cl_im ...

cssruby-on-railstwitter-bootstrapruby-on-rails-5cloudinary

The CSS media query isn't working as expected

Having some trouble with media queries on a physician website I'm developing. I've tried multiple times but can't seem to figure out why they aren't working. If anyone could take a look and offer some guidance, that would be much apprec ...

css

Error encountered during Bootstrap 4 SCSS compilation: Invalid US-ASCII character identified as "xE2"

Encountering difficulties when compiling certain bootstrap 4 modules (switching from beta3). Despite the fact that the issue can be resolved by adding @charset: 'UTF-8'; to the _hover.scss mixin partial (which is flagged as deprecated within the ...

csssassbootstrap-4twitter-bootstrap-4

What is the method for incorporating multiple classes into an li element?

Here is the code I am working with: function createCardList(classname, cardName) { console.log(classname); var $li = $('<li class=' + classname + '>'); var $input = $('<input >', { type: 'radio&ap ...

javascriptjqueryhtmlcss

React-Tooltip trimming

Currently, I am facing a dilemma that requires some resolution. The issue at hand is related to the placement of React-Tooltip within the List element. Whenever it's positioned there, it gets clipped. On the other hand, placing it at the bottom isn&a ...

javascriptcssreactjsmaterial-ui

Enhance your design with Bootstrap 4's innovative spacing

Recently started using Bootstrap. Here's the HTML code I have. How can I achieve consistent spacing between all my box elements without causing any of them to wrap on larger screens like laptops and desktops? In the past, I would use CSS-grid for this ...

htmlcsswebbootstrap-4frontend

The Bootstrap popover fails to toggle when its content is updated

I have a series of buttons and whenever one is clicked, I want to populate the popover with information from an AJAX request. Here's what I've implemented: $(document).on('click','.foo', function (event){ $(this).popov ...

jqueryajaxtwitter-bootstrapbootstrap-popover

Tips for importing HTML modules using AJAX technology?

Is it possible to load the correct module on my site depending on the path that the user enters? Would storing the HTML in a file named some_file.htm, ajaxing that file to the client, and then appending it to the DOM work for this purpose? I'm curio ...

javascripthtmlcss