bootstrap
  1. bootstrap-sizing
PreviousNext

Bootstrap Sizing

Bootstrap provides a variety of classes that can be used to control the size of elements such as buttons, headings, images, and more.

Syntax

To use Bootstrap's sizing classes, simply add the class name to the HTML element you want to resize. Here are some of the available classes:

  • .h1, .h2, .h3, .h4, .h5, .h6: these classes can be used to resize heading tags.
  • .display-1, .display-2, .display-3, .display-4: these classes can be used to create large headings or display text.
  • .lead: this class can be used to increase the size of paragraph text.
  • .btn-lg, .btn-sm: these classes can be used to create large or small buttons.
  • Width and height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default.

Example

Modify those values as you need to generate different utilities here.

<div class="w-25 p-3 border">Width 25%</div>
<div class="w-50 p-3 border">Width 50%</div>
<div class="w-75 p-3 border">Width 75%</div>
<div class="w-100 p-3 border">Width 100%</div>
<div class="w-auto p-3 border">Width auto</div>
Try Playground

Example-2

Here is an example of how to use Bootstrap's sizing classes.

<h1 class="display-2">Hello, World!</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="btn btn-primary btn-lg">Click Me</button>
Try Playground

Explanation

In the example above, we used Bootstrap's .display-2 class to create a large heading, .lead class to increase the size of the paragraph, and .btn-lg to create a large button.

Use

Bootstrap's sizing classes can be used to control the size of various elements on a webpage, which can help to improve readability and create visual hierarchy.

Important Points

  • Bootstrap provides a variety of sizing classes that can be used to control the size of elements.
  • Sizing classes can be used to resize headings, paragraphs, buttons, and more.
  • By using sizing classes, you can improve readability and create visual hierarchy on a webpage.

Summary

Bootstrap's sizing classes are a useful tool for controlling the size of elements on a webpage. These classes are easy to use and can help to improve readability and create visual hierarchy.

ShadowSpacing
Published on: