Bootstrap - Sizing

Setting Width and Height

Bootstrap has classes for setting the width and height of elements. The .w-* classes set the width of an element, while the .h-* classes set the height.

To set the width of an element, use the .w-* classes, where * is a percentage value:

.w-25   /* Sets the width to 25% */
.w-50   /* Sets the width to 50% */
.w-75   /* Sets the width to 75% */
.w-100  /* Sets the width to 100% */

These classes can be used on various elements like <div>, <img>, <table>, and more.

To set the height of an element, use the .h-* classes:

.h-25   /* Sets the height to 25% */
.h-50   /* Sets the height to 50% */
.h-75   /* Sets the height to 75% */
.h-100  /* Sets the height to 100% */

These classes are useful for creating elements with a specific height, such as equal-height columns or setting the height of an image.

You can combine width and height classes to create elements with specific dimensions.

<div class="w-50 h-50"></div>

Bootstrap also has responsive width and height classes that set different sizes based on the screen size. These classes follow the format .w-{breakpoint}-* and .h-{breakpoint}-*, where {breakpoint} is the screen size (e.g., sm, md, lg, xl) and * is the percentage value.

.w-sm-50   /* Sets the width to 50% on small screens and above */
.h-lg-75   /* Sets the height to 75% on large screens and above */

Using these responsive classes, you can create elements that adapt their width and height based on the screen size, which is useful for creating responsive layouts.

Relative Sizing

Bootstrap has relative sizing classes that help make elements responsive and adaptable to their parent containers. These classes set the maximum width or height of an element relative to its parent.

<div class="mw-100">
  This element will never be wider than its parent.
</div>

This class is useful when you want an element to fill its parent container horizontally but not exceed its width.

Similarly, to set the maximum height of an element to 100% of its parent container, use the .mh-100 class:

<div style="height: 200px;">
  <div class="mh-100" style="background-color: #f0f0f0;">
    This element will never be taller than its parent.
  </div>
</div>

The .mh-100 class makes sure that the element does not exceed the height of its parent container.

Bootstrap also has responsive relative sizing classes that let you set different maximum widths or heights based on the screen size. These classes follow the format .mw-{breakpoint}-100 and .mh-{breakpoint}-100, where {breakpoint} is the screen size (e.g., sm, md, lg, xl).

<div class="mw-sm-100 mw-md-75 mw-lg-50">
  This element's max-width changes based on the screen size.
</div>

Using these relative sizing classes, you can create elements that adapt to their parent containers and different screen sizes, making your layouts more responsive and flexible.

Viewport Relative Sizing

Bootstrap provides viewport relative sizing classes that set the size of an element relative to the viewport (the visible area of the web page). These classes are useful for creating elements that take up the full width or height of the screen, regardless of the device size.

<div class="min-vw-100 bg-light">
  This element will always have a minimum width equal to the viewport width.
</div>

The .min-vw-100 class makes sure that the element's width is at least as wide as the viewport, even if its content is narrower.

<div class="min-vh-100 bg-secondary text-white">
  This element will always have a minimum height equal to the viewport height.
</div>

The .min-vh-100 class makes the element's height at least as tall as the viewport, regardless of its content.

<div class="vw-100 bg-info">
  This element will always have a width equal to the viewport width.
</div>

The .vw-100 class sets the element's width to match the viewport width, even if it has padding or borders.

<div class="vh-100 bg-warning">
  This element will always have a height equal to the viewport height.
</div>

The .vh-100 class sets the element's height to match the viewport height, making it fill the screen vertically.

These viewport relative sizing classes are handy for creating full-screen sections, hero images, or any elements that need to adapt to the viewport size. They help create immersive and responsive designs that work well on different devices and screen sizes.

Sizing Utilities

Bootstrap has utility classes for controlling element size and positioning. These classes help create fixed or sticky elements that stay in place while scrolling.

The .fixed-top class positions an element at the viewport top, making it stay there even when the page is scrolled. This is often used for navigation bars or headers that need to be always visible.

<nav class="fixed-top navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

The .fixed-bottom class positions an element at the viewport bottom, keeping it in place during scrolling. This is useful for footers or action bars that should remain accessible at all times.

<footer class="fixed-bottom bg-light text-center py-3">
  <!-- Footer content -->
</footer>

The .sticky-top class positions an element at the viewport top, but only when it reaches the top during scrolling. This means that the element will scroll with the page until it reaches the top, then stick there. This is a good option for sidebars or secondary navigation that should be visible but not always fixed.

<div class="sticky-top bg-white p-3">
  <!-- Sticky content -->
</div>

These sizing utilities, combined with other Bootstrap classes, help create dynamic and interactive layouts that respond to user scrolling and keep important elements easily accessible.

Responsive Sizing

Bootstrap has responsive sizing classes that let you change the size of elements based on the screen size. These classes are useful for creating layouts that adapt to different devices and screen resolutions.

Bootstrap uses a mobile-first approach, where the default styles apply to the smallest screens (extra small), and then you can add classes to change the sizes for larger screens. The responsive sizing classes follow the format .{property}-{breakpoint}-{size}, where:

• {property} is the CSS property you want to set (e.g., w for width, h for height).
• {breakpoint} is the screen size at which the style should apply (e.g., sm, md, lg, xl).
• {size} is the size value (e.g., 25, 50, 75, 100 for percentages, or auto).

<div class="w-100 w-sm-75 w-md-50 w-lg-25">
  This element will be full-width on extra small screens,
  75% width on small screens, 50% width on medium screens,
  and 25% width on large and extra large screens.
</div>

You can combine responsive sizing classes with other Bootstrap classes to create flexible and adaptive layouts.

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">
    <div class="card w-100 h-md-100">
      <!-- Card content -->
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-8">
    <div class="card w-100 h-md-auto">
      <!-- Card content -->
    </div>
  </div>
</div>

The cards will be full-width and stacked on small screens, then become equal height on medium screens, and finally take different widths on large screens, all while maintaining their height.

Here are more examples of responsive sizing in action:

<div class="h-25 h-sm-50 h-md-75 h-lg-100">
  This element will have a height of 25% on extra small screens,
  50% on small screens, 75% on medium screens,
  and 100% on large and extra large screens.
</div>

<img src="..." class="mw-100 mw-md-75 mw-lg-50" alt="...">

The image will always fit within its container on extra small and small screens, then take up 75% of its container on medium screens, and 50% on large and extra large screens.