Issue with button style in dropdown menu in Twitter Bootstrap

                 <nav class="nav-collapse user">
                    <div class="user-info pull-right">
                        <img src="http://placekitten.com/35/35" alt="User avatar">
                        <div class="btn-group">                         
                            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                                <div><strong>John Pixel</strong>Administrator</div>
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" style="padding:15px 15px 0 15px;">
                                <form method="POST" style="background:none;">
                                    <input type="text" name="username" placeholder="<?= lang('username') ?>">
                                    <input type="password" name="password" placeholder="<?= lang('password') ?>">
                                    <input class="btn-default" type="submit" value="Log In">
                                </form>
                            </ul>
                        </div>
                    </div>
                </nav>

Issue with button style only occurs on the dropdown menu. Does anyone know how to troubleshoot this?

Thank you for your assistance.

Answer №1

To achieve the desired look, the class must be changed to btn btn-default. The main class for Bootstrap buttons is btn with additional classes like btn-primary, btn-success, btn-info, btn-warning, btn-danger, and btn-link for different styles.

For more information, visit: http://getbootstrap.com/css/#buttons

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

What is the best way to deactivate a button when not all inputs require filling?

I need to make a change in my form where I want to disable a button, but not all the inputs are mandatory. Even though I have specified which inputs need to be filled in the code, I still have to fill all the inputs in the form. How can I modify this? $ ...

Identifying child elements in jQuery with identical IDs

Consider this HTML setup: <div id="contentRead"> ... <div id="List"></div> </div> ... <div id="contentWrite"> ... <div id="List"></div> </div> ...

You cannot assign an optional parameter in Express after it has already been declared

Having trouble with passing optional parameters in my param function as defined below. During testing in Postman, I keep encountering a Reference Error 'off' is not defined. It seems like I'm missing something crucial in how to utilize the p ...

Laravel method to send back JSON error messages through the use of an "error" object in the response

My aim is to utilize the "Bootstrap File-input" plugin for JQuery to facilitate file uploads via AJAX. This plugin expects error messages to be received in a JSON key labeled "error" as shown below: {error: 'You are not allowed to upload such a file. ...

The menu includes a "scroll to #href" feature, however, it does not support links that open in a new tab (target blank)

I have encountered an issue with my website's navbar, which has a scroll-to-link function as it is a one-page site. Recently, I tried to add a new link to the menu that directs users to an external page (not within the same page). However, when I cl ...

Looking for Angular 2 material components for dart with CSS styling? Need help centering a glyph on your page?

HTML: <div class="border"> <glyph class="center" [icon]="'star'" ></glyph> <div class="centerText"> This Is Text that is centered. </div> </div> Css: .centerText{ text-align: center ...

Issue with Laravel: unable to send data through ajax requests

I have developed a custom jQuery plugin specifically tailored for Laravel to facilitate sending data via Ajax to the server. However, I seem to be facing an issue where no data is being sent successfully. When I use dd($request->all()) to inspect what h ...

Ways to store a filestream coming from Node.js into AngularJS

When using my express server, I have a post-request set up to retrieve a pdf file from Amazon S3 and then send it back to Angular. This is the endpoint in my express server: var fileStream = s3.getObject(options).createReadStream(); fileStream.pipe(res); ...

What is the most effective way to transfer information between two pages in React JS?

I am a newcomer to react and currently working on a project that involves two pages/components. I collect user details on one page and need to display that data on another page. However, I am facing difficulties in achieving this. Can someone please provid ...

What is the best way to incorporate parallax scrolling in the center of a webpage?

I am trying to implement a parallax scrolling effect in the middle of my page, but it seems to be causing issues once I reach that section while scrolling. I attempted to use intersection observer, but unfortunately, it did not resolve the problem. const ...

React 17 Form not registering the final digit during onChange event

I am currently experiencing an issue with a form that includes an input field of type "number." When I enter a value, the last number seems to be skipped. For example: If I input 99 into the box, only 9 is saved. Similarly, when typing in 2523, only 252 ...

The module 'react/lib/React' could not be located within the file 'ReactTestUtils.js'

Setting up unit-tests for a React Native project using ReactTestUtils is causing an issue with npm test. The error message I receive is: Cannot find module 'react/lib/React' from 'ReactTestUtils.js' I suspect that my dependencies are ...

Sluggish animation performance in threejs when using requestAnimationFrame within a class

Experiencing choppy animation on the JSFiddle? When trying to move your mouse or interact with the content, you may have come across issues with the classing related to requestAnimationFrame(this.animation). Initially, it didn't work as expected, but ...

The d3.select function is failing to update the chart on the website

I am facing a challenge in updating data in a d3 chart with the click on an HTML object #id. After successfully coding it in jsfiddle, I encountered issues when implementing it on a web page. The scenario involves a simple leaflet map where the chart is d ...

Tips for creating a horizontally expandable container that adjusts after overflowing

I am struggling to create a container that initially fills with text vertically, and then expands horizontally if needed. You can see what I mean in this diagram here: container_diagram Just like shown in the image - the container has a fixed height that ...

Please ensure there is space reserved for the header above the content

Currently, I am working on creating a webpage with a unique banner design. My goal is for the content to scroll from the bottom and remain fixed directly under the upper portion of the banner. Initially, my idea was to have the content box take up the siz ...

Using Ajax.BeginForm with new AjaxOptions to handle exceptions

There are two standout options here: OnSuccess and OnFailure. These options allow me to execute functions depending on whether the page update is successful or fails. For instance, I have an Action that triggers an email send operation with this code snipp ...

What is the best way to keep JWT secure in a web browser?

Recently, I delved into the world of JSON Web Tokens (JWT) for the first time. I'm currently working on a Node.js application utilizing the Hydra-Express framework. My goal is to implement JWT for authentication purposes. Following the documentation, ...

Issue with the overall layout in Bootstrap 4 involving the main content area and sidebar

I am encountering challenges with the overall design of my website, particularly with how the main content area and sidebar are positioned. The layout I have in mind is: https://i.sstatic.net/PYphE.jpg Below is the code snippet I am using to implement th ...

How should you proceed when npm install cannot locate a specific dependency, even though you can easily download it manually?

Currently, I am faced with a dilemma while attempting to execute a JavaScript file that is accompanied by a package.json file. The issue arises during the npm install command in the folder as it fails to locate one of the dependencies. To address this pro ...