{"id":5400,"date":"2018-01-18T02:24:28","date_gmt":"2018-01-18T02:24:28","guid":{"rendered":"https:\/\/www.jquery-az.com\/?p=5400"},"modified":"2023-10-07T09:32:35","modified_gmt":"2023-10-07T09:32:35","slug":"8-examples-align-text-bootstrap-4-center-right","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/8-examples-align-text-bootstrap-4-center-right\/","title":{"rendered":"Bootstrap text alignment classes"},"content":{"rendered":"

Bootstrap 4 has built-in classes for dealing with text alignments as the center, right, and left along with text-weight (bold), wrapping, overflow, transform, and italic text.<\/p>\n

In this tutorial, I am going to show you live demos of aligning text center, right, and left. I will also show you how to use float helper classes along with text alignment classes for images.<\/p>\n

Bootstrap center text example<\/strong><\/h3>\n

To make the text aligned center, use the .text-center<\/em><\/strong> class. In the following example, this class is applied in a paragraph and h1 to h6 headings to make the text aligned centered:<\/p>\n

\"Bootstrap<\/p>\n

BS4 markup:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.3\/css\/bootstrap.min.css\" integrity=\"sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy\" crossorigin=\"anonymous\">\r\n\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<h3>Demo of Text Alignment in Bootstrap 4<\/h3>\r\n<p class=\"text-center\">The text-center class for aligning text centrally in paragraph!<\/p>\r\n<h1 class=\"text-center\">Center text in heading 1!<\/h1>\r\n<h2 class=\"text-center\">Center text in heading 2!<\/h2>\r\n<h3 class=\"text-center\">Center text in heading 3!<\/h3>\r\n<h4 class=\"text-center\">Center text in heading 4!<\/h4>\r\n<h5 class=\"text-center\">Center text in heading 5!<\/h5>\r\n<h6 class=\"text-center\">Center text in heading 6!<\/h6>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
The example of aligning text right<\/strong><\/h3>\n
To align text right, use the .text-right<\/strong><\/em> class in the element. Like the above example, I have applied the .text-right class in a paragraph and h1 to h6 headings for the demo:<\/p>\n
\"Bootstrap<\/p>\n
The code for aligning right example<\/strong><\/p>\n
<p class=\"text-right\">Align right by text-right class in a paragraph<\/p>\r\n\r\n<h1 class=\"text-right\">Align right in h1!<\/h1>\r\n\r\n<h2 class=\"text-right\">Align right in h2!<\/h2>\r\n\r\n<h3 class=\"text-right\">Align right in h1!<\/h3>\r\n\r\n<h4 class=\"text-right\">Align right in h1!<\/h4>\r\n\r\n<h5 class=\"text-right\">Align right in h1!<\/h5>\r\n\r\n<h6 class=\"text-right\">Align right in h1!<\/h6><\/pre>\n
The example of using text-left class<\/strong><\/h3>\n
Similarly, you may use the .text-left<\/em><\/strong> class for aligning the text towards the left. This is the default behavior applied in the text. For showing the difference, I have used paragraphs and headings with and without using the .text-left class.<\/p>\n
Have a look at the output and code by visiting the demo page:<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
The markup for using text-left class:<\/strong><\/p>\n
<p\u00a0 class=\"text-left\">Align left by text-left class in a paragraph<\/p>\r\n\r\n<h1 class=\"text-left\">Align left in h1!<\/h1>\r\n\r\n<h2 class=\"text-left\">Align left in h2!<\/h2>\r\n\r\n<h3 class=\"text-left\">Align left in h1!<\/h3>\r\n\r\n<h4 class=\"text-left\">Align left in h1!<\/h4>\r\n\r\n<h5 class=\"text-left\">Align left in h1!<\/h5>\r\n\r\n<h6 class=\"text-left\">Align left in h1!<\/h6><\/pre>\n
Dealing text alignment with viewports<\/strong><\/h3>\n
If you want to keep text aligned center or right for large or small devices specifically as per viewports then use the text-align property as explained below with examples.<\/p>\n
For making text aligned centered in large devices only, use the text-lg-center<\/em><\/strong> class. To test this, copy the code from the example page in your editor and run the code. Now, look at the screen size >=1200px<\/strong> <\/em>and in small size to see how it changes its alignment:<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
The code:<\/strong><\/p>\n
<div class=\"container\">\r\n\r\n<h3>Demo of Text Alignment in Bootstrap 4<\/h3>\r\n\r\n<p class=\"text-lg-center\">Aligned center in large viewport and left in small viewports<\/p>\r\n\r\n<h1 class=\"text-lg-center\">h1: centered in large screen and left in med\/smaller<\/h1>\r\n\r\n<h4 class=\"text-lg-center\">h4: centered in large screen and centered in med\/smaller<\/h4>\r\n\r\n<h5 class=\"text-lg-center\">h5: centered in large screen and centered in med\/smaller<\/h5>\r\n\r\n<h6 class=\"text-lg-center\">h6: centered in large screen and centered in med\/smaller<\/h6>\r\n\r\n<\/div><\/pre>\n
Align center in medium and large viewports only<\/strong><\/h3>\n
For making text aligned centered in medium and large viewports only while left aligned in small viewports, use the .text-md-center<\/em><\/strong> class in elements like <p>, <h1>, <h2> etc.<\/p>\n
Have a look at the usage and try it with various screen sizes:<\/p>\n
See online demo and code<\/strong><\/a><\/h6>\n
The code:<\/strong><\/p>\n
<div class=\"container\">\r\n\r\n<h3>Demo of text-md-center class<\/h3>\r\n\r\n<p class=\"text-md-center\">Aligned center in medium\/large viewports and left in small viewports<\/p>\r\n\r\n<h1 class=\"text-md-center\">h1: centered in medium\/large screen and left in smaller<\/h1>\r\n\r\n<h4 class=\"text-md-center\">h4: centered in medium\/large screen and centered in smaller<\/h4>\r\n\r\n<h5 class=\"text-md-center\">h5: centered in medium\/large screen and centered in smaller<\/h5>\r\n\r\n<h6 class=\"text-md-center\">h6: centered in medium\/large screen and centered in smaller<\/h6>\r\n\r\n<\/div><\/pre>\n
The text-sm-center class demo<\/strong><\/h3>\n
For center alignment of text in all devices\/viewports except the extra small (less than 576px) use the text-sm-center<\/em><\/strong> class. The demo code is shown below:<\/p>\n
The code to try:<\/strong><\/p>\n
<div class=\"container\">\r\n\r\n<h3>Demo of text-sm-center class<\/h3>\r\n\r\n<p class=\"text-sm-center\">Align center in small\/medium\/large viewports except extra small<\/p>\r\n\r\n<h1 class=\"text-sm-center\">h1: centered in small\/medium\/large except extra small<\/h1>\r\n\r\n<h4 class=\"text-sm-center\">h4: centered in small\/medium\/large except extra small<\/h4>\r\n\r\n<h5 class=\"text-sm-center\">h5: centered in small\/medium\/large except extra small<\/h5>\r\n\r\n<h6 class=\"text-sm-center\">h6: centered in small\/medium\/large except extra small<\/h6>\r\n\r\n<\/div><\/pre>\n
Using text grid classes for right and left alignment<\/strong><\/h3>\n
Similarly, Bootstrap 4 has built-in classes for aligning right or left (specifically) for various screens\/viewports. The following classes are available:<\/p>\n
For aligning right:<\/strong><\/p>\n