BootStrap | Text Utilities (Alignment, Wrapping, Weight etc.)
Last Updated :
21 Nov, 2022
Bootstrap is one of the most popular, open-source front-end frame work which helps us in developing responsive, mobile-first websites and web applications. As a part of its offering, bootstrap provides us a collection of classes, called the Text Utilities classes, which controls various text properties, such as, text alignment, text wrapping, text overflow, text transformation, font weight, italics, monospace, resetting color of text, removing text decorations.
Bootstrap breakpoints:
- sm: Viewport greater than 576px.
- md: Viewport greater than 768px.
- lg: Viewport greater than 992px.
- xl: Viewport greater than 1200px.
Let us now see the various classes: Text Alignment:
- text-justify: As the name suggest this class is used to set the text alignment to justified state.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-justify</h3>
<p class="text-justify">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- text-center: It sets the text alignment to center for all screen sizes.
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-center</h3>
<p class="text-center">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- text-left: It sets the text alignment to left for all screen sizes.
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-left</h3>
<p class="text-left">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- text-right: It sets the text alignment to right for all screen sizes.
Example:
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-right</h3>
<p class="text-right">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- text-(viewport)-(align): Bootstrap offers us a series of classes which can change the text alignment based on the viewport size.
- text-sm-left: It sets the text alignment to left on viewport of size greater than 576px(sm).
- text-md-left: It sets the text alignment to left on viewport of size greater than 768px(md).
- text-lg-left: It sets the text alignment to left on viewport of size greater than 992px(lg).
- text-xl-left: It sets the text alignment to left on viewport of size greater than 1200px(xl).
- text-sm-center: It sets the text alignment to center on viewport of size greater than 576px(sm).
- text-md-center: It sets the text alignment to center on viewport of size greater than 768px(md).
- text-lg-center: It sets the text alignment to center on viewport of size greater than 992px(lg).
- text-xl-center: It sets the text alignment to center on viewport of size greater than 1200px(xl).
- text-sm-right: It sets the text alignment to right on viewport of size greater than 576px(sm).
- text-md-right: It sets the text alignment to right on viewport of size greater than 768px(md).
- text-lg-right: It sets the text alignment to right on viewport of size greater than 992px(lg).
- text-xl-right: It sets the text alignment to right on viewport of size greater than 1200px(xl).
Text Wrapping
- text-wrap: It sets text wrapping on the applied element.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-wrap</h3>
<p class="text-wrap" style="width: 30rem;">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- text-nowrap: It removes text wrapping on the applied element.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-nowrap</h3>
<p class="text-nowrap" style="width: 30rem;">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- text-truncate: It sets truncation on the applied element with ellipses.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-truncate</h3>
<p class="text-truncate" style="width: 30rem;">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
Font Weight and Italics
- font-weight-bold: It is used to set font text to bold face.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>font-weight-bold</h3>
<p class="font-weight-bold">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- font-weight-bolder: It is used to set font weight bolder than its parent element.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>font-weight-bolder</h3>
<p class="font-weight-bolder">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- font-weight-normal: It is used to set normal font weight.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>font-weight-normal</h3>
<p class="font-weight-normal">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- font-weight-light: It is used to set light font weight to the text.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>font-weight-light</h3>
<p class="font-weight-light">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- font-weight-lighter: It is used to set font weight lighter than its parent element.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>font-weight-lighter</h3>
<p class="font-weight-lighter">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
- font-italics: It is used to set the style of the font to italics.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>font-italic</h3>
<p class="font-italic">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
Monospace:
- text-monospace: It is used to change the text font to monospace.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-monospace</h3>
<p class="text-monospace">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
Reset Color:
- text-reset: It is used to remove the font color from the text to font color inherited from its parent element.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
color: blue;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-reset</h3>
<p class="text-reset">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
Remove Text Decorations:
- text-decoration-none: It is used to remove all the text decoration from the text.
html
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px dashed black;
text-decoration: line-through;
}
h1.text-center{
color: green;
}
</style>
<title>Bootstrap Text Utilities</title>
</head>
<body>
<div class="container">
<h1 class="text-center">GeeksForGeeks</h1>
<h3>text-decoration-none</h3>
<p class="text-decoration-none">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</p>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...