What could be preventing my bootstrap class from being applied as expected?

As a newcomer to HTML, CSS, and bootstrap, I am struggling with updating my stylesheet values in the preview. This is the button tag that I am working with:

<button class="btn btn-primary btn-xl">Find out More</button>

However, when attempting to modify the style of the "btn-xl" value in my CSS file:

.btn-xl {
    padding: 1rem 2rem;
}

None of the changes seem to reflect on my preview. Can someone please point out where I might be going wrong?

I have verified the links between my HTML and CSS files for any errors but didn't find any issues there. There are no conflicting typos either, so I find myself completely puzzled at this juncture.

htmlcssbutton

Answer №1

Seems like there may be an issue with the value being overridden by bootstrap. It could be due to the order in which you are adding the style sheets or it might be a problem with specificity. To fix this, consider changing the class to:

.btn.btn-xl {
    padding: 1rem 2rem;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b1bcbca7a0a7a1b2a393e6fde1fde0">[email protected]</a>/dist/css/bootstrap.css" rel="stylesheet"/>

<button class="btn btn-primary btn-xl">Find out More</button>

To update all buttons, you can modify the variables that bootstrap uses for padding.

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

Switch the input direction from left to right

Check out my demonstration that is currently functional: JSFIDDLE $('#btn-search').on('click', function(e) { e.preventDefault(); $('#search').animate({width: 'toggle'}).focus(); }); Is there a way to modify ...

javascriptjqueryhtmlcss

Tips for eliminating the page margin in Java when converting HTML using iTextPdf with HTMLConverter

No matter how hard I've tried, setting the body with padding: 0 and margin: 0, as well as attempting to set the doc() with setMargin, nothing seems to be effective ...

javahtmlcssitext

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

Looking for assistance with implementing a jQuery function for an onClick event on

I've been diving into learning jquery and managed to create a basic checkbox feature with a function that allows you to set all options as read-only by checking the "None of the above" button. <html> <body> <form id="diagnos ...

javascripthtmljquerycheckbox

"Apply a class to a span element using the onClick event handler in JavaScript

After tirelessly searching for a solution, I came across some answers that didn't quite fit my needs. I have multiple <span id="same-id-for-all-spans"></span> elements, each containing an <img> element. Now, I want to create a print ...

javascriptjqueryclassonclickhtml

Font Awesome functions properly on one Angular component but not on the second one

I've encountered a strange issue while working on my Angular project. About a month ago, I added a component with a form that included some inputs along with Font Awesome icons. The code snippet is provided below. <div class="field"> ...

htmlangularfont-awesome

Isotope animation glitches causing malfunction

I've been experimenting with CSS3 transitions on isotope items, but I'm encountering some strange behavior. My goal is to achieve a fading effect on the items, similar to this example: . Thank you in advance! Here's what I have so far: http ...

javascriptjquerycss

What is the best way to link multiple select tags in an HTML document?

I am working with a data grid that contains student information such as Name, Class, and Score. Each row has a checkbox for selection. The requirement is that when the user selects one or more rows and clicks on the "show information" Button, a new windo ...

htmlangulartypescript

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

The public folder in Node.js is known for its tendency to encounter errors

I'm facing an issue with displaying an icon on my website. Here is the current setup in my code: app.js const http = require('http'); const fs = require('fs'); const express = require('express') const path = require(&apo ...

javascripthtmlnode.jsexpress

The progress bar for uploading a file is causing issues with the redirect function in the

I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...

javascripthtmljqueryajaxlaravel

Unable to utilize the .keyCode method within a query selector

Trying to utilize .keyCode in JavaScript to identify a pressed key, but the console consistently displays null after each key press. Below is the relevant CSS code: <audio data-key="65" src="sounds\crash.mp3"></audio> ...

javascripthtmlcss

Customizing the font style on a CSS changing table

Below is the CSS code snippet I am using: table.Table12 { border:1px solid blue; } table.Table12 td { border:1px solid blue; width:200px;} table.Table12 a:link { font-weight: bold;} Additionally, here is the HTML code: <table class="Table12" align="r ...

htmlcssfonts

The button works properly in JSFiddle, however, it is not able to clear the ordered list in the

DEMO Creating a script that captures mouse click coordinates and appends them to a list. The functionality works, except for an issue with the clear button not working properly. After making corrections in jsfiddle, the script functions correctly. Howeve ...

javascriptjqueryhtmlbuttonjsfiddle

Issues with implementing a Bootstrap dropdown list in a Django HTML template

I'm having trouble implementing Bootstrap in my Django project's shared HTML file. The dropdown list isn't functioning properly despite trying various approaches, including using CDN and local Bootstrap files. When I click on the dropdown li ...

pythonhtmldjangodjango-templatesbootstrap-5

What is the reason for being unable to remove the event listener from a sibling element?

function show1() { console.log("ok1"); document.getElementById("a2").removeEventListener("click", delegate); } function show2() { console.log("ok2"); } function show3() { console.log("ok3"); } function delegate(event) { var flag = event.target ...

javascripthtmlevent-listener

Angular backslash is encoded

Experiencing the same issue as this individual: angularjs-slash-after-hashbang-gets-encoded The URL is getting encoded and not routing correctly, causing it to fall to the otherwise in my route config. I have not been able to identify the root cause yet, ...

javascripthtmlangularjsurl-rewriting

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date

$(document).ready(function () { $("#end").datepicker({ dateFormat: "dd-M-yy", minDate: 0, onSelect: function () { var start = $('#start'); var startDate = $(this).datepicker('getDate') ...

javascriptcssajaxtwitter-bootstrap

Welcome to the NGINX Default Landing Page

In my NGINX server, the index page is located in subfolders rather than at the root of the site (e.g. /root/pages/htmls/index.html). How can I configure index.html to be the default webpage for the site? ...

nginxdefaulthtml

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6