Bootstrap - Sizing: A Comprehensive Guide for Beginners

Hello there, future web developers! Today, we're going to dive into the exciting world of Bootstrap sizing. As your friendly neighborhood computer teacher, I'm here to guide you through this journey, step by step. Don't worry if you're new to programming – we'll start from the basics and work our way up. So, grab a cup of coffee (or tea, if that's your thing), and let's get started!

What is Bootstrap Sizing?

Before we jump into the nitty-gritty, let's understand what Bootstrap sizing is all about. Imagine you're decorating a room. You want some furniture to fit perfectly, some to take up half the space, and others to adjust based on the room's size. That's exactly what Bootstrap sizing helps us do with elements on a web page!

Relative to the Parent

Let's start with sizing elements relative to their parent. This is like deciding how much space a picture should take up on a wall.

Width Classes

Bootstrap provides classes that allow you to set an element's width as a percentage of its parent's width. Here's a handy table of these classes:

Class	Description
w-25	Width 25%
w-50	Width 50%
w-75	Width 75%
w-100	Width 100%
w-auto	Auto width

Let's see these in action:

<div class="container">
  <div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
  <div class="w-50 p-3" style="background-color: #ddd;">Width 50%</div>
  <div class="w-75 p-3" style="background-color: #ccc;">Width 75%</div>
  <div class="w-100 p-3" style="background-color: #bbb;">Width 100%</div>
  <div class="w-auto p-3" style="background-color: #aaa;">Auto width</div>
</div>

In this example, we're creating five div elements, each with a different width class. The p-3 class adds some padding for visibility. You'll see that each div takes up a different percentage of its parent container's width.

Height Classes

Similarly, Bootstrap offers classes for setting heights:

Class	Description
h-25	Height 25%
h-50	Height 50%
h-75	Height 75%
h-100	Height 100%
h-auto	Auto height

Here's how you might use these:

<div style="height: 200px;">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">Auto height</div>
</div>

In this example, we're setting a fixed height on the parent div and then using height classes on the child elements. The d-inline-block class makes these div elements display inline.

Relative to the Width

Now, let's talk about sizing elements relative to the viewport width. This is like adjusting a TV screen to fit different room sizes.

Bootstrap uses the vw unit, which stands for "viewport width". Here are some classes:

Class	Description
vw-100	Width 100vw
min-vw-100	Min-width 100vw
max-vw-100	Max-width 100vw

Let's see an example:

<div class="vw-100" style="background-color: #eee;">This div is 100vw wide.</div>

This div will always be as wide as the viewport, even if you resize the browser window.

Relative to the Height

Similar to viewport width, we can also size elements relative to the viewport height using the vh unit.

Class	Description
vh-100	Height 100vh
min-vh-100	Min-height 100vh
max-vh-100	Max-height 100vh

Here's how you might use this:

<div class="vh-100" style="background-color: #eee;">This div is 100vh tall.</div>

This div will always be as tall as the viewport, adjusting as you resize the browser window.

Relative to the Viewport

Lastly, let's look at sizing that's relative to both the viewport's width and height.

Min-width 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

This div will be at least as wide as the viewport, but can expand if its content requires more space.

Min-height 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

Similarly, this div will be at least as tall as the viewport, but can expand if needed.

Putting It All Together

Now that we've covered all these sizing options, let's create a fun little example that puts them to use:

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
        I'm 75% wide relative to my parent!
      </div>
      <div class="h-50 p-3" style="background-color: #ced4da;">
        I'm 50% tall relative to my parent!
      </div>
    </div>
    <div class="col-md-6">
      <div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
        I'm as wide as the viewport!
      </div>
      <div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
        I'm half as tall as the viewport!
      </div>
    </div>
  </div>
</div>

In this example, we're using a combination of width, height, and viewport-relative sizing to create a diverse and responsive layout. Try resizing your browser window to see how these elements adapt!

And there you have it, folks! You've just taken your first steps into the world of Bootstrap sizing. Remember, practice makes perfect, so don't be afraid to experiment with these classes in your own projects. Before you know it, you'll be creating responsive layouts like a pro!

Happy coding, and may your websites always fit just right! ?

Credits: Image by storyset