Bootstrap Sizing

Bootstrap has a separate set of utilities for controlling the size of the element.

You can manage the width and height of the element as per the requirement.

Here, we will talk about the Boostrap Sizing utilities and discuss the various Bootstrap classes for the same.

, we will talk about the Bootstrap Sizing utilities and discuss the various Bootstrap classes for the same.

To understand the working better, we can first have a look at the CSS sizing properties.

These properties are used to control the normal height and width as well as maximum height and width.

So let’s have a look at the CSS sizing properties before we dive in to the Bootstrap concepts.

CSS Properties

CSS has following properties to control the sizing of the components:

  • height: For controlling the height of the element
  • max-height: For setting the maximum height of the element
  • max-width: For setting the maximum width of the element
  • min-height: For setting the minimum height of the set the element
  • min-width: For setting the minimum width of the element
  • width: For controlling the width of the element

Check the code below to get a good understanding of these properties:

div {
    max-width: 500px;
    max-height: 500px;
    height: 100px;
    width: 500px;
    background-color: powderblue;
}

HTML body contains

  
   
Set the max-width of an element

     
This div element is illustrating the use of the CSS sizing properties

     

     
Check the effect by resizing the screen

Now that, you understand the basic sizing features in CSS. Let us get back to Bootstrap.

Bootstrap Sizing

Bootstrap lets you easily control the elements for its width or its height.

You can set these parameters relative to the parent components. Let’s check out some points that you need to know for Bootstrap Sizing utilities:

  • You can manage the width and height of the components using the $sizes Sass map present in the _variables.scss.
  • For width, we have the w-* classes and height we have the h-* classes. Where the * is replaceable by appropriate numbers
  • By default, Bootstrap supports the sizing for 25%, 50%, 75%, and 100%. Therefore, the * in the above point can be replaced with 25, 50, 75 or 100.

Modify those values as you need to generate different utilities here

  
Width 25%

        
Width 50%

        
Width 75%

        
Width 100%

        

            
Height 25%

            
Height 50%

            
Height 75%

            
Height 100%

Max-Width and Max-Height

Similarly, the max-width and max-height properties of CSS can also be controlled by following bootstrap clases:

  • mw-*: Sets the maximum width with the * value.
  • mh-*: Sets the maximum height with the * value.

The below code will illustrate the use of these classes to control the maximum width and height for the value of 100%

Max-width 100% 


    
Max-height 100%