Previous: Let's Stand on the Shoulders of Giants: How to Import and Customize Bootstrap 4 in Your Project
★ This article is suitable for readers with the following background:
- Familiar with HTML, CSS
- Know how to properly reference Bootstrap 4
- Want to understand some common patterns in Bootstrap 4
Before we start, let's discuss the difference between using Bootstrap 4 and not using it.
Simply put, if we don't use Bootstrap 4 and write the webpage manually, we have to write all the HTML content (obviously) and set every single CSS property ourselves (another obvious statement). However, if we use Bootstrap 4, many commonly used CSS styles are already pre-written for us. We just need to be familiar with the Bootstrap 4 documentation, know which class name corresponds to the pre-written CSS, and then directly apply it to the tag. Let's use a very simple example to illustrate, see the codepen below.
Of course, to enable Bootstrap 4, our HTML environment must include one necessary <link> and three necessary <script> tags. You can find the code to copy directly in the Bootstrap 4 documentation, so I won't repeat it here. I'll just focus on the key code.
First is the first <div> tag
<div class="box"></div>
And its CSS looks like this
.box {
width: 100px;
height: 100px;
background: blue;
margin: 48px;
}
For this .box <div>, we set width and height to 100px each, background:blue, and margin:48px. With a basic understanding of HTML and CSS, you can easily tell that this is a blue square 100px wide and tall, with a 48px margin on all four sides.
Next, for the second <div>, we applied Bootstrap 4 classes.
<div class="box2 bg-danger m-5"></div>
And the CSS is only this
.box2 {
width: 100px;
height: 100px;
}
For this .box2 <div>, our custom CSS is only the width and height of 100px each. The bg-danger and m-5 are Bootstrap 4 classes. bg-danger means the background uses the danger theme color, which in Bootstrap 4 defaults to #dc3545. m-5: the English 'm' stands for margin, and the number 5 represents the spacing size. In Bootstrap 4's default settings, 1rem equals 16px, so specific spacing values are: 1 = 0.25rem = 4px, 2 = 0.5rem = 8px, 3 = 1rem = 16px, 4 = 1.5rem = 24px, 5 = 3rem = 48px. So m-5 means margin: 48px. This results in a #dc3545 colored square 100px wide and tall, with a 48px margin on all four sides.
So using Bootstrap 4 allows us to develop web pages much faster. Many, many commonly used classes are already written for us. Once we are proficient, we can simply add the corresponding class names directly to the required tags. This is just a simple example, but basically, Bootstrap 4 works this way.
Spacing
Simply put, it's about the commonly used margin and padding. Let's familiarize ourselves with these codes first.
m: margin
p: padding
t: top
r: right
b: bottom
l: left
x: right and left
y: top and bottom
Combining the above gives us the following meanings:
m: margin
mt: margin-top
mr: margin-right
mb: margin-bottom
ml: margin-left
mx: margin-right and margin-left
my: margin-top and margin-bottom
p: padding
pt: padding-top
pr: padding-right
pb: padding-bottom
pl: padding-left
px: padding-right and padding-left
py: padding-top and padding-bottom
Next come the numbers. Bootstrap 4 has a base unit of 1rem, where 1rem = 16px. The codes above are followed by numbers, indicating how much inner or outer spacing.
1: 0.25 * 1rem = 4px
2: 0.5 * 1rem = 8px
3: 1 * 1rem = 16px
4: 1.5 * 1rem = 24px
5: 3 * 1rem = 48px
So in the future, whenever we need margin or padding, we can write something like this:
mt-3 → margin-top: 16px
pb-4 → padding-bottom: 24px
m-2 → margin: 8px;
Colors
In Bootstrap 4, colors are set not only by using theme color names but also by prefixing the object before the color. For example, text-primary means the text uses the primary theme color, or bg-secondary means the background uses the secondary theme color. Take a look at this simple codepen.
<div class="box bg-danger m-5 p-2 text-light">text-danger</div>
<div class="box1 bg-warning m-5 p-4 text-secondary">
<a href="">text-secondary</a>
</div>
For these two <div>s, my CSS only sets the width and height. All the styling is done using Bootstrap 4's pre-written class names directly in the tags, resulting in the appearance shown below. Both the text color, background color, and their margin and padding are set using pre-written classes. When you hover over the second <div>, because it contains an <a> tag, a hover effect will also occur.
Display
We all know that every HTML tag has its default display property. To change this default property, you must use CSS to reset the display value, whether you want inline, block, etc. But now, you can also directly use pre-written classes in the tag. For example, d-inline or d-block can change the value directly. Check out this codepen.
d-block → display: block
d-inline → display: inline
<div class="bg-danger m-5 p-2 text-light d-inline">d-inline</div>
<div class="bg-warning m-5 p-2 text-secondary d-inline">d-inline</div>
<span class="bg-danger m-5 p-2 text-light d-block">text-danger</span>
<span class="bg-warning m-5 p-2 text-secondary d-block">text-secondary</span>
Here we have two <div> and two <span> tags. Originally, <div> is a block element, but I changed it to an inline element by directly adding d-inline to its class. Originally, <span> is an inline element, but I changed it to a block element by adding d-block to its class. Isn't that convenient?
Border
I believe border is also a very commonly used feature. First, take a look at this codepen.
In the world of Bootstrap 4, you can directly add borders using class names like border-{direction}.
<div class="box border">Shows border on all four sides</div>
<div class="box border-top">Shows border on the top</div>
<div class="box border-right">Shows border on the right</div>
<div class="box border-bottom">Shows border on the bottom</div>
<div class="box border-left">Shows border on the left</div>
If you want to show borders on three sides but remove one, you can use the border-{direction}-0 pattern to remove a specific side.
<div class="box border-0">Removes all borders</div>
<div class="box border border-top-0">Removes top border</div>
<div class="box border border-right-0">Removes right border</div>
<div class="box border border-bottom-0">Removes bottom border</div>
<div class="box border border-left-0">Removes left border</div>
You can also add rounded corners (border-radius) using rounded-{direction}.
<div class="box border rounded">Rounded corners on all four</div>
<div class="box border rounded-top">Rounded top corners</div>
<div class="box border rounded-right">Rounded right corners</div>
<div class="box border rounded-bottom">Rounded bottom corners</div>
<div class="box border rounded-left">Rounded left corners</div>
Or make them circular (rounded-circle) or pill-shaped (rounded-pill).
<div class="box border rounded-circle">Makes it circular</div>
<div class="box box1 border rounded-pill">Makes it pill-shaped</div>
You can also apply theme colors to the borders.
<div class="box border border-primary">Applies primary theme color</div>
<div class="box border border-danger">Applies danger theme color</div>
Here is the resulting display:
The above Spacing, Colors, Display, and Border are what I consider some fundamental Bootstrap 4 common patterns. Many details can be customized in the _variable.scss file. I hope you enjoyed the introduction, thank you!
References: