Is there a way to alter the font size with Bootstrap?

My goal is to reduce the size of my entire Bootstrap project without adjusting the font size. I am currently using the StarAdmin template.

Despite my attempts to alter the font size in my style.css, any changes made to the "font-size" property do not reflect on the website.

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.8rem;  // <===== changed value but nothing happend
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

I simply want to adjust the base font size to resize my entire webpage.

javascriptcssbootstrap-4

Answer №1

Make sure to include the important keyword for all CSS properties that need to be overridden
Refer to the code below for a demonstration

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.8rem !important;  // <===== Add Important
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff; }

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 steps are involved in creating a circular shape on canvas?

I am trying to create a circular shape in the canvas using the code below. The code involves moving an object with keyboard keys, and I need help making the canvas shape into a circle without affecting the functionality of the code. I attempted to modify t ...

javascripthtmlcsscanvas

What is the best way to continuously call an asynchronous method in native JavaScript until a successful response is received?

There is a scenario where I have an asynchronous method that can either return success or failure. The requirement is to repeatedly call this async method from another function until it returns success. However, if it fails consecutively for 5 times, the ...

javascriptasync-awaites6-promise

Creating and initializing arrays in JavaScript

Is it possible to declare and assign a variable within the same line, but not with an array? Why is that? var variable1 = 5; // Works var array1[0] = 5; // Doesn't work var array2 = []; // Works array2[0] = 5; ...

javascriptarraysvariable-assignmentvariable-declaration

Dynamic WordPress Website Designs

Seeking recommendations for responsive WordPress themes that offer extensive CSS and structural customization options. The goal is to retain all of WordPress's built-in features, such as blogging capabilities, while having the freedom to completely co ...

wordpresscsswordpress-theming

Transform an array of strings into properties of an object

Looking for a way to map an array to a state object in React? Here's an example: const array =["king", "henry", "died", "while", "drinking", "chocolate", "milk"] Assuming you have the following initial state: state = { options:{} } You can achieve ...

javascriptarraysreactjs

Tips for designing the microphone appearance on the Google Chrome speech input interface

Google Chrome features an input control for speech recognition. If you want to know how to use it, check out this link. I'm looking to enlarge the microphone icon and possibly use a customized image for it. Increasing the width and height of the inp ...

javascripthtmlcssgoogle-chromestyles

Is there a way to automatically adjust the size of a 'Pan' popup to fit the View in the ArcGIS JavaScript API?

Has anyone else experienced popups being cut off or out of view in an ArcGIS JSAPI build version 4.26x? I have tried using "view.popup.alignment" and "view.popup.dockEnabled" to control the popup location, but I'm looking for a solution where the view ...

javascriptpopuparcgis-js-api

What steps are needed to pass an additional parameter to the onMouseDown function in ReactJS?

The TypeScript function listed below demonstrates the functionality: const handleMouseDownHome = (e: any) => { // Only activates when scroll mouse button is clicked if (e.button === 1) { window.open("/", "_blank", " ...

javascriptreactjs

The Rsuite Uploader is refusing to transfer the file to the Express server

For my project, I am utilizing an Uploader component from RSuite to upload images to the Express server: <Uploader action={process.env.REACT_APP_API_URL + '/loadMap'} draggable headers={{Authorization: 'Bearer ' + localStorage.getIte ...

javascriptexpressrsuite

Obtaining specific Google Image Search results depending on certain criteria

I am working on a project to create a web application that can suggest outfits based on the weather of a specific location. Here is where I am at with the project so far: https://codepen.io/anchpags/pen/bMpjxX <html> <head> <link rel=" ...

javascripthtmlcssapigoogle-custom-search

Nestjs Roles Decorator: Unusual behavior in extracting user from payload information

I have been working on implementing my Roles Decorator in Nestjs and it has been going well. However, I encountered an issue when trying to compare the user data from the jwt-token payload to the required role. Strangely, I found that I can only access the ...

javascriptnode.jstypescriptnestjsdecorator

The exception is being thrown in RxJs retryWhen before all retry attempts have been made

I have been working on implementing an API call that needs to be retried a few times in case of errors, after a specific time delay, and based on certain conditions such as checking if the success response JSON has any null fields. I came across this helpf ...

javascriptangularrxjsrxjs6

Unable to bring in ES6 module to Vue's single file component

I am currently experimenting with ES6 modules and Vue.js, specifically single file components (SFC). To create my project, I utilized the Vue CLI with the webpack-simple template. I encountered an error that says "TypeError: Cannot read property 'name ...

javascriptvue.jsvuejs2vue-componentes6-modules

Iterating through a JavaScript object to calculate the total sum of all its values

I'm currently working on a task that involves iterating through an object to determine the total number of appearances for each candidate and displaying that information on the webpage. This particular challenge has been quite puzzling for me. As som ...

javascriptjqueryarraysloopsobject

Updating a nested subarray using Node.js with the MongoDB API

I am currently in the process of developing a backend API using Node.js/Express and MongoDB for managing student records. I am facing difficulty with updating a sub-field within the data structure. Below is the code snippet from my Student.js file located ...

javascriptnode.jsmongodbexpressmongoose

Try to refrain from invoking effect within a component that is being conditionally rendered

I have a particular component that I am working with: const Component = () => { useEffect(() => { console.log('Executing useEffect in the Component') }, []) return <Text>element</Text>; } Whenever I conditionally re ...

javascriptreactjsrenderingreact-hooks

The situation arose where Next.js could not access the cookie due to

Hi there, I'm new to web development and recently encountered a challenge with my next.js app. I'm currently following Brad Traversy's course on udemy to learn basic CRUD functions. In this component, I am trying to fetch user data from my ...

javascriptcookiesnext.js

Discovering relative URLs within an MVC 4 framework

Seeking a solution for storing the fully qualified URL of a relative path in MVC: ~/Content/themes/base/jquery-ui.min.css" In my scenario, I have a hidden input field: <input type="hidden" id="siteUrl" value=""/> I attempted to populate this hidd ...

javascriptjqueryasp.net-mvcasp.net-mvc-4

Is there a built-in method that can be used to transform JSON into URL parameters?

Is there a built-in function in JavaScript or the JSON object to convert a JSON object to URL form like: "parameter=12&asd=1"? This is how I have achieved it: var data = { 'action':'actualiza_resultado', ...

javascriptjson

Encountered an issue with parsing the source map while working on my personal computer

WARNING: failed to parse source map from specified file location due to a missing file or directory. I encountered this error message while trying to launch my React application, and I'm unsure of the cause. ...

javascriptreactjs