Unable to change the font-size in Bootstrap 5 is not possible

I've been exploring Bootstrap 5 and encountered an issue while trying to change the font-size of the navbar-brand element. Despite my efforts, the font-size remained unchanged. Additionally, attempts to add padding to the navbar-brand did not result in any padding being applied on the top or bottom.

.navbar-brand {
  font-family: "Ubuntu";
  font-size: 2.5rem;
  font-weight: bold;
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced0ced1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <a class="navbar-brand" href="#">tindog</a>

htmlcssbootstrap-5

Answer №1

Check out this CSS snippet

a.navbar-brand {
  font-family: "Ubuntu";
  font-size:2.5rem;
  font-weight: bold;
  }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43212c2c37303731223303766d736d72">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <a class="navbar-brand" href="#">tindog</a>

Answer №2

If you want to avoid messing up your CSS too much, my suggestion is to install Bootstrap as an NPM Package. This way, you can easily modify the font-family in SCSS without having to deal with specific overwrites using !important. Instead, the SCSS compiler will compile Bootstrap with your chosen font automatically :)

//Add any custom variable overrides here
$font-family-base : Ubuntu;

//Import Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/bootstrap.scss";

For more information, check out https://getbootstrap.com/docs/5.0/customize/sass/.

Answer №3

You should give the display-num class a try, it did the trick for me as well.

display-1

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

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

phphtmlcsswordpressdynamic

What steps are involved in integrating QuickBlox on your website?

I am completely new to web development and have a question about integrating QuickBlox into my website using JavaScript. I have included the necessary JavaScript files in my website and set up the QuickBlox admin application, but I'm not sure how to p ...

javascriptphphtmlapiquickblox

javascript issue with showing content on click

I'm currently working on a school assignment where I am using the onclick() function to display information about an object. However, I am facing an issue where the information is not popping up as expected. HTML <!DOCTYPE html> <html> ...

javascriptjqueryhtmlcssoneclick

Retrieving data from a database using twig

In my PHP code, I currently have the following: $vals['followers'][] = R::find('follow', 'following_id=?', array($_GET['id'])); This code returns all followers in the "follow" table with a following_id that matche ...

phphtmlarraystwig

Is It Always Necessary to Specify a Width and Height for an Image?

Is it necessary to specify both the Width and Height of an image on a webpage for consistent display across all browsers, or is specifying just one sufficient? While it may appear fine on certain browsers, I want to double-check for accuracy. Appreciate ...

html

Unable to use href attribute as intended

HTML: <a id="Switch">Click here to switch</a> <a href="image1_large.png" class="mainA blade"> <img id="mainImage" src="image1.png"/></a> Javascript: <script> $(function() { $('#Switch').click(functio ...

javascripthtmlhref

Bookmarklet in JavaScript that automatically extracts and displays Meta keywords in a new tab within the browser

I successfully implemented a script that extracts site meta keywords and writes them into the DOM. javascript:(function metaKeywords() { metaCollection = document.getElementsByTagName('meta'); for (i=0;i<metaCollection.length;i++) { nameAttri ...

javascripthtmldombookmarklet

Prevent the page from refreshing when a value is entered

I currently have a table embedded within an HTML form that serves multiple purposes. The first column in the table displays data retrieved from a web server, while the second column allows for modifying the values before submitting them back to the server. ...

javascripthtmlforms

Creating a QR code using base64 in PHP and HTML

My PHP code generates QR codes in WordPress, but some tax roles require the code to be in base64. I need help converting my code to work with Hexadecimal Encoding 64 and utf8. Here's a snippet of my current code: <?php $barcodetype = ...

phphtmlwordpress

Contrasting results when logging an element in Chrome versus IE

Running the script below in Internet Explorer gives the expected output for console.log(target_el): <div class="hidden"></div> However, when run in Chrome, the output changes to: <div class="visible"></div> To add a humorous twi ...

javascripthtml

Adjusting the thickness of the CSS cursor line upon entering an input field

Having an image as the background for an input field has been causing issues for me. Although I can adjust the line-height and font-size easily, the cursor line appears outside of the background image when clicking inside the input field. Is there a speci ...

phpcss

Align the items in the center of a Bootstrap navigation bar

I am looking to center the navigation menu items on my navbar. Currently, my navbar layout appears like this: https://i.sstatic.net/BqRwW.png Specifically, I want "Users", "Admin", and "Records" to be centered within the navbar. Additionally, I would lik ...

cssbootstrap-4flexbox

Issues encountered while attempting to convert HTML Image and Canvas Tags to PDF within Angular 2

I am currently facing an issue with my code. My requirement is to download HTML content as a PDF file. I have been successful in downloading text elements like the <p> tag, but I am encountering difficulties when trying to download images and canvas ...

htmlangulartypescriptpdfcanvas

Issue with integrating Bootstrap-5.1 dropdown functionality into a React project

Currently, I am in the process of learning React and I have been experimenting with using Bootstrap for styling purposes. I have encountered difficulties while trying to implement a dropdown menu. Despite researching numerous Stack Overflow posts on this ...

reactjsbootstrap-5

Eliminate placeholder text when the tab key is pressed

I'm currently facing an issue with a textarea that has a placeholder and the Tab key functionality in Internet Explorer. I've included placeholder.js to make it work, but when I repeatedly press the tab key and focus on the textarea, the placehol ...

javascriptjqueryhtmlcss

The href attributes are not being retrieving correctly

I'm currently working on extracting the URLs for each restaurant listed on this page and have developed a Python script for this purpose: import time from selenium import webdriver from selenium.webdriver.common.keys import Keys browser = webdriver ...

pythonhtmlseleniumselenium-webdriver

Adding and removing attributes with Jquery upon clicking a button

How can I make my listed items add an ID when clicked, or what am I doing incorrectly? $('.ex-menuLi #tt').attr('id', 'test'); $('.ex-menuLi').on('click', function(){ $(this).attr('id', &apos ...

javascriptjqueryhtmlcss

javascript for each and every textarea

I am looking to apply my JavaScript code to all the Textarea elements on my page. $_PAGE->addJSOnLoad(" $('.textarea').each(function() { $(this).keyup(function() { var characterCount = $(this).val().length; var mes ...

javascriptphpjqueryhtml

Retrieve detailed Paypal donation transaction information in HTML format with the donation button functionality integrated

I'm currently in the process of building a web application for a non-profit organization, which includes a Paypal Donation feature. I am using HTML5, CSS3, and jQuery to develop this application. I have successfully implemented the Donation button fro ...

jqueryhtmlcsspaypaltransactions

What is the most effective method for resetting the scroll position of a browser when refreshing a page?

Portfolio Query I am in the process of setting up a basic portfolio website. My navigation bar includes various links, one of which is labeled "About Me". Upon clicking this link, the page immediately jumps to a specific section with an element ID of #abo ...

javascriptjqueryhtmlcss