Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I downloaded a Bootstrap 4 example template which loads the "bootstrap.min.css" per this line:

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Now, I have below code for which I would like to make formatting changes:

<h1 class="mb-5">I want to change formatting for this part</h1>

If I take a look at the "bootstrap.min.css" file I see a single reference to the "mb-5" class attribute indicated in the "h1" header:

.mb-5,
.my-5 {
  margin-bottom: 3rem !important; }

Here, only style specified is "margin-bottom: 3rem !important"

Where can I find the remaining attributes for this mb-5 class such as font, font size/color, background color etc.?

First of all, I highly suggest you read the Bootstrap 4 docs. The docs relating to this question about mb-5 class can be found here. It explains in detail about the classes. The mb-5 class is all about the element spacing...

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties.

So in particular to mb-5 class, this is the margin bottom spacing with a sizing of 5. As you have figured out, this class has only one property of the margin-bottom. That is all this class does.

To find all other styling properties, I suggest you use some sort of dev tools, such as Chrome's Dev Tools, and inspect the h1 to find all the relevant styles for it.

It is recommended to create your own class for the element and change any attributes in a separate linked CSS file. This way, you don't change any of Bootstrap's file in case you need to revert back to their attributes at a later date.

CSS stands for Cascading Style Sheets. The style for this h1 element (and indeed, any element) can be defined (and inherited) form many places. Properties defined in a parent element, cascade down to the children element.

The easiest way to figure out what properties and values are applied to one element is to open the browser's developer tools (in Chrome and Firefox, press F12 ).

In the developer tools, you can 'inspect' which styles are applied and where they come from.

See screenshot below for an example.

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.