Challenges arise when implementing bootstrap with a default font size of 10px as rem

In my current project, I've decided to integrate Bootstrap 4 and start using the 'rem' unit for lengths. Initially, I set 'rem = 10px' to simplify conversions from pixels. However, this caused a problem because Bootstrap now primarily uses 'rem' instead of 'px', resulting in elements appearing too small by default. This led me to manually style each element, including buttons, to adjust the size properly.

For instance, the font-size for '.lead' is set as 1.25rem = 12.5px, which is smaller than desired.

I'm curious about other developers who use Bootstrap in their projects - do they prefer using 'rem' or 'px' as the length unit? And if it's 'rem', is the standard value set as '10px' or '16px'?

Edit: Including an image link for further clarity

https://i.sstatic.net/xJHRk.png

I hope this question makes sense.

cssbootstrap-4

Answer №1

px is not always a consistent unit of measurement on various devices due to differences in DPI. This is why Bootstrap utilizes rem as a more reliable option. While they have tried using rem for spacing units before, it was unsuccessful in the past due to lack of support from older browsers. However, it seems that this is no longer a problem...

In Bootstrap 3, font-size: 10px; was set on <html> to establish 1rem = 10px.

Bootstrap 4 now sets font-size: 16px; on mobile devices and font-size:14px on larger or higher density devices.

For further discussions on this topic, check out this thread.

Answer №2

  • Using Only Bootstrap 4: An unconventional approach that comes to mind is creating CSS variables and utilizing them instead of using rem units.

    :root{ --custom-rem: 10px; }

  • Implementing SCSS with Bootstrap 4: For those working with SCSS, consider writing a function that converts pixels to rem units. This way, you can easily work with rem = 16px. 

    
@function remy($pxsize) {
    @return ($pxsize/16)+rem;
}

    .myclass{
    margin-right: remy(10);;
  }

Please note that the code formatting may not display correctly.

Answer №3

In my opinion, the key solution lies in establishing the base rem to 10 px within the html code and subsequently adjusting the bootstrap variable $font-size-base to 1.6rem. By doing so, all of those concerns will be resolved seamlessly.

Answer №4

One downside of relying on a prebuilt css framework is the need to adhere to their standards unless you're open to modifying sections of their underlying code.

For instance, it appears that bootstrap follows the typical 16px = 1rem rule; therefore, if you prefer a different fundamental unit, you will need to manually update all of the preset bootstrap measurements.

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 can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

javascriptcss

PHP for Beginners: Implementing Headers and Footers

When it comes to writing files that are included in a PHP webpage using includes or requires, what are the best practices? For instance, should titles be added in the header/footer file, or will this result in duplicate titles appearing on the page? Additi ...

phphtmlbootstrap-4headerfooter

How can I ensure that my Overlay doesn't obstruct my dropdown content?

I'm trying to create a dropdown in my fixed navbar. When I click the open button, I want the overlay to cover everything except the dropdown content. Even after setting the z-index of my dropdown content to 10000, it still didn't work. $("#dr ...

jquerycss

Tips for lining up two images and text on the same row

I am facing a simple issue - how can I align an image and text in one line like this [image - text - image] and repeat the pattern. <html> <head> <title></title> <style> img { width: 100px; h ...

htmlcss

Type of element returned

Is there a way to retrieve the element type? I'm interested in applying the style of a class to HTML5 elements without using the class attribute. <!DOCTYPE> <html> <head> <title>My page</title> </head& ...

javascriptjquerycsshtml

Bootstrap the registration form to center it in the layout

https://i.sstatic.net/IWSHz.png Here is the code snippet: <div class="col-md-4 col-md-offset-3">. I am new to Bootstrap and trying to center a form that is currently on the left. I have experimented with different col-md and col-xl numbers, but have ...

htmlbootstrap-4

Menu disappears below the screen

I am experiencing an issue with my dropdown menu. I am having trouble figuring out how to adjust the position of the dropdown that appears when hovering over the "support" button. I would like to move it slightly to the left as half of it is extending off ...

htmlcssdrop-down-menustyling

Mediawiki version 1.26.2 experiencing loading issues with Stylesheet

I recently updated my Mediawiki installation to the latest version 1.26.2, but I've encountered an issue with the stylesheet not loading correctly. Strangely enough, in a previous version (1.23.5) installed on the same server, everything was working f ...

phpcssmediawiki

Detecting the existence of a scrollbar within the document object model using JavaScript - a guide

Could someone provide a JavaScript syntax for detecting the presence of a scrollbar in the DOM by measuring the body height and window height? ...

javascripthtmlcss

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

css

Is VS Code highlighting compatible with template string CSS in Emotion?

Is there a way to enable syntax highlighting for emotion's template string css in VS Code? I've been looking for plugins, but all of them seem to focus on snippets. I have tried using css({ camelCaseCssProps:...}), which works. However, I am att ...

cssvisual-studio-codestyled-componentssyntax-highlightingemotion

Can you apply transparency to a hex color variable in SCSS and then use that variable again?

In my app, I have a set of scss variables that represent colors used throughout the interface. For example: $primary-color: #00755E There are also colors that are variations of this primary color with different opacities. For instance, $primary-color with ...

javascripthtmlcsstypescriptsass

What is the best way to reduce the height of the navbar in Bootstrap 4?

Check out my code snippet for implementing Bootstrap 4: <nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded "> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> ...

cssbootstrap-4twitter-bootstrap-4

What is the best way to increase the font size without resizing the parent input element?

Is there a way to increase the font size in this text box without enlarging the box itself? Any suggestions or advice would be appreciated! https://i.sstatic.net/91pon.jpg. Below is my CSS code for reference (the class of the form is 'box'). .bo ...

htmlcss

Could a javascript loop be created to continuously activate a button with each iteration?

I have just started learning javascript and I am in the process of creating a website where users can change the background by simply clicking on a button. It's working perfectly fine so far, but I want to add another feature where the background imag ...

javascripthtmlcssloops

Is it possible to highlight only a specific color on the div background?

I'm trying to create a layout similar to this: https://i.sstatic.net/dZ1ka.png I've managed to get most of it working, but I'm struggling with the yellow rectangle that spans the background of the screen. Currently, it looks like this: https ...

htmlcssreactjs

Tips for positioning an asp.net Button alongside other elements in a form by making use of Bootstrap styling

Looking to revamp the style of my ASP.NET Web Forms project with the latest version of Bootstrap. Having trouble aligning an ASP.NET Button control horizontally with other controls in the form, as seen in this snapshot: https://i.sstatic.net/IVRKo.png Her ...

htmlcssbootstrap-4webforms

Ignoring CSS transitions by changing the width property in JavaScript’s element.style

When attempting to create a smooth progress bar animation by adjusting the width using document.querySelector('#mydiv').style.width = '20%', I noticed that the new width is updated instantly rather than transitioning smoothly. It seems ...

javascriptcss

Creating a dynamic image carousel using jQuery

Today, I completed the jQuery course on Code Academy and am now trying to create an image slider using it. While I have a general idea of how it should work, I feel like I'm missing a key element. My goal is to have the slider continuously running whe ...

javascriptjqueryhtmlcss

Selenium Webdriver is retrieving background colors with unexpected alpha values

When I need to retrieve the background-color of a WebElement, I typically use the following code: string color = IWebElement.GetCssValue("background-color"); Selenium often returns something like this for the color value: color = "rgba(153, 255, 255, 1) ...

c#cssseleniumselenium-webdriver