How to manage responsive text size and margin in Bootstrap 5?
Last Updated :
29 Jul, 2024
In this article, we will see how to manage responsive text size and margin using Bootstrap 5. Bootstrap enables to create the responsive websites. It contains a collection of built-in classes for styling the website. Managing the responsive text size can be done with the help of the utility classes like 'text-sm', 'text-md', etc, which adjust the font size based on the screen size. To manage the margins, the classes, such as 'ms-sm', 'mt-md', etc, which help to set the responsive margin values. These classes ensure a visually appealing layout across different device sizes without the need for custom CSS.
There are several techniques that help to create and manage the responsive text size and margin, which are listed below.
We will explore the above topics with the help of examples.
Breakpoint Classes
Bootstrap 5 provides a predefined set of different available breakpoints to build the responsive utilities which help in quickly creating responsive layouts, along with defining the range of screen size or viewport size. 6 default breakpoints are facilitated by Bootstrap, which are known as grid tiers.
Breakpoints Classes | Screen type | Range |
|---|
| xs | Extra Small | 576px and below |
| sm | Small | 576px and above |
| md | Medium | 768px and above |
| lg | Large | 992px and above |
| xl | Extra large | 1200px and above |
| xxl | Extra Extra large | 1400px and above |
Margin
Margin is declared using the 'm' class and its values start from 0 (no margin ) to 5 ( large margin ), and it contains another value auto which automatically calculates and sets the margin based on the context and layout requirements.
Syntax
m*
Here, the star(*) represents the below margin classes.
Margin | Descriptions |
|---|
| m | It defines the margin for all sides. |
| mx | It defines the margin for the right and left sides. |
| my | It defines the margin for the top and bottom sides. |
| ml | It depicts the margin-left |
| mb | It depicts margin-bottom |
| mr | It depicts margin-right |
| mt | It depicts margin-top |
Text Size
In Bootstrap 5, the text size is managed through classes that provide a consistent and responsive typography system.
Syntax
text-*
Here, the star(*) represents the below Text Size classes.
Text Size classes | Descriptions |
|---|
| text-sm | It is defined for small screens. |
| text-md | It is defined for medium-sized screens. |
| text-lg | It is defined for large screens. |
| text-xl | It is defined for extra-large screens. |
| text-xxl | It is defined for the even larger. |
Approach
- We have to use fs-4, fs-md-3, fs-lg-2, fs-xl-1 for responsive text.
- Now, ensure horizontal centering by using mx-auto class.
- Now, implement my-xl-5, my-lg-4, my-md-3, my-sm-2, my-xs-1 for vertical margins.
- Now, maintain Bootstrap styling with text-light, w-50, bg-success, p-4, and text-center.
Example: In this example, we will create a html page containing 4 boxes containing responsive text and having a responsive margin between them.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css"
integrity=
"sha512-b2QcS5SsA8tZodcDtGRELiGv5SaKSk1vDHDaQRda0htPYWZ6046lr3kJ5bAAQdpV2mmA/4v0wQF9MyU6/pDIAg=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<link rel="stylesheet"
href="style.css">
<title>Responsive Margin</title>
</head>
<body>
<h1 class="text-center display-4">
Responsive Margin
</h1>
<div class="text-light w-50 bg-success p-4
text-center mx-auto my-xl-5 my-lg-4 my-md-3 my-sm-2 my-xs-1">
This is the
first box
</div>
<div class="text-light w-50 bg-success p-4
text-center mx-auto my-xl-5 my-lg-4 my-md-3 my-sm-2 my-xs-1">
This is the
second box
</div>
<div class="text-light w-50 bg-success p-4
text-center mx-auto my-xl-5 my-lg-4 my-md-3 my-sm-2 my-xs-1">
This is the
third box
</div>
<div class="text-light w-50 bg-success p-4
text-center mx-auto my-xl-5 my-lg-4 my-md-3 my-sm-2 my-xs-1">
This is the
forth box
</div>
</body>
</html>
/* style.css */
@media (min-width: 576px) {
div {
font-size: 2vw;
}
}
@media (max-width: 576px) {
div {
font-size: 3.5vw;
}
}
Output:
Similar Reads
How to make Text Responsive in Bootstrap ?
Making text responsive in Bootstrap involves using responsive typography utilities like .text-sm, .text-md, etc., to ensure text adapts to different screen sizes. This ensures readability and maintains visual hierarchy across devices. Below are the approaches to making text responsive in Bootstrap:
3 min read
How to Wrap Text Around Image in Bootstrap ?
To wrap text around an image in Bootstrap 5, you can apply the 'float' utility classes along with the 'img-fluid' class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it. ApproachThe code uses Bootstrap 5 c
3 min read
How to disable Responsive (mobile) Navbar in Bootstrap 5?
Bootstrap 5 Navbar Nav is used to make the navbar according to the requirement of the project like navbar navigation links built on .nav options with their own modifier class. Bootstrap 5 Navbar Responsive behaviors help us determine when the content will hide behind a button but in this article, we
3 min read
Bootstrap 5 Images Responsive images
Bootstrap 5 Responsive images are used to resize the images according to their parent element and screen sizes. It means, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio. Responsiv
1 min read
How to Create a Responsive Table in Bootstrap ?
A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens. Table of Content Using the table-responsive
4 min read
How to create a Responsive Sidebar in Bootstrap?
A responsive sidebar is a valuable component for web applications and admin panels that allows for efficient navigation while adapting to different screen sizes. To create a responsive sidebar in Bootstrap, use the navbar-expand-* classes along with Bootstrap's grid system to design a collapsible si
3 min read
How to make iframe Responsive in Bootstrap ?
A responsive iframe in Bootstrap refers to embedding an iframe within a container that adjusts its size and aspect ratio based on the screen size, ensuring proper display and usability across various devices and viewports. ApproachIn this approach, we are using Bootstrap's Embed Responsive Classes.
2 min read
How to Create a Responsive Image Gallery in Bootstrap ?
An image gallery is like a digital album where we can put our multiple images to attract user attention. We have used Bootstrap a CSS framework for Creating a Responsive Image Gallery where the layout adjusts automatically based on the screen size, ensuring that it looks good on both large desktop s
3 min read
How to set image to center of an responsive navbar ?
In order to make a website responsive, the clever to-do is by using Bootstrap. By using Bootstrap, we can make our website look good and responsive. There are two ways to set an image or logo in the center of a responsive navbar. They are: Using CSSUsing Bootstrap Now let's understand each of them.
3 min read
How to make Responsive Carousel in Bootstrap ?
Bootstrap Responsive Carousel simplifies the creation of responsive carousels for dynamic content display. Utilize the Carousel component with a suitable HTML structure, ensuring proper sizing and responsive breakpoints for optimal display across devices. ApproachCreate an HTML document with Bootstr
2 min read