{"id":87850,"date":"2021-09-07T15:44:36","date_gmt":"2021-09-07T19:44:36","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=87850"},"modified":"2021-11-17T09:06:27","modified_gmt":"2021-11-17T14:06:27","slug":"bootstrap-typography","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/","title":{"rendered":"How to Use Special Bootstrap Typography in Joomla 4"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-1024x538.png\" alt=\"Bootstrap Typography\" class=\"wp-image-87858\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p> Your new Joomla 4 site (whether you are on <a href=\"https:\/\/www.inmotionhosting.com\/joomla-hosting\/joomla-vps-hosting\">Joomla VPS hosting<\/a> or a different plan) comes with the Bootstrap CSS framework built in.  This means you can introduce responsive style elements easily into your content.  In this article, you will see several helpful Bootstrap typography elements that you can only access by providing a bit of HTML input into your content. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"#different-editors\">TinyMCE VS CodeMirror Editor<\/a><\/li><li><a href=\"#lead-sentence\">Creating a Lead Sentence<\/a><\/li><li><a href=\"#blockquote\">Blockquote With Attribution<\/a><\/li><li><a href=\"#description-list\">Description Lists<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Integrating Bootstrap Typography<\/h2>\n\n\n\n<p> Many of the typographical elements you will use often, like italics and bold character marking, will be available with a click in the TinyMCE editor.  However, there are special elements in Bootstrap that are not available as a button in the editor.  Those special typographical elements you can only use by editing HTML will be featured in this article. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"different-editors\">TinyMCE VS CodeMirror Editor<\/h2>\n\n\n\n<p> If you use the TinyMCE editor, you will need to \u201ctoggle\u201d the main editor off in order to customize the HTML output properly.  <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_063-1024x640.png\" alt=\"Toggle the HTML editor in Joomla 4 TinyMCE editor\" class=\"wp-image-87851\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_063-1024x640.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_063-300x188.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_063-768x480.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_063.png 1203w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p> If you want to a plain HTML text editor (instead of the default TinyMCE editor) check out the full guide on <a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/disable-tinymce-editor\/\">how to enable the CodeMirror editor<\/a>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"lead-sentence\">Creating a Lead Sentence<\/h2>\n\n\n\n<p> There are occasions in which you may want to emphasize the first paragraph of your article or create a \u201clead\u201d sentence.  The \u201clead\u201d class in Bootstrap allows you to easily identify a lead sentence and point it out to your reader: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted src src-html\">&lt;<span style=\"color: #0000ff;\">p<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"lead\"<\/span>&gt;\n      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.\n&lt;\/<span style=\"color: #0000ff;\">p<\/span>&gt;\n\n&lt;<span style=\"color: #0000ff;\">p<\/span>&gt;\n  Regular paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.\n&lt;\/<span style=\"color: #0000ff;\">p<\/span>&gt;\n<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"125\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_064-1024x125.png\" alt=\"Using a lead sentence to emphasize text with Bootstrap in Joomla 4\" class=\"wp-image-87852\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_064-1024x125.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_064-300x37.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_064-768x94.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_064.png 1045w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"blockquote\">Blockquote With Attribution<\/h2>\n\n\n\n<p> A blockquote provides you with an easy way to isolate a segment of text meant to be attributed to someone else.  You can also use blockquotes as a form for repeating a part of your text that you want to reinforce to the reader with additional emphasis.  A basic blockquote is available in the TinyMCE editor. However, in order to add a nice line for attribution, you will want to add a line break (with a <code>&lt;br&gt;<\/code> tag)  and a blockquote footer via Bootstrap: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted src src-html\">&lt;<span style=\"color: #0000ff;\">blockquote<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"blockquote\"<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">p<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"mb-0\"<\/span>&gt;Give me the liberty to know, to utter, and to argue freely according to conscience, above all liberties.&lt;\/<span style=\"color: #0000ff;\">p<\/span>&gt;\n&lt;<span class=\"has-inline-color has-vivid-cyan-blue-color\">br<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">footer<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"blockquote-footer\"<\/span>&gt;John Milton &lt;<span style=\"color: #0000ff;\">cite<\/span> <span style=\"color: #a0522d;\">title<\/span>=<span style=\"color: #8b2252;\">\"Source Title\"<\/span>&gt;<span style=\"font-style: italic;\">Areopagitica<\/span>&lt;\/<span style=\"color: #0000ff;\">cite<\/span>&gt;&lt;\/<span style=\"color: #0000ff;\">footer<\/span>&gt;\n&lt;\/<span style=\"color: #0000ff;\">blockquote<\/span>&gt;<\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"921\" height=\"106\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_065.png\" alt=\"Using a block quote with attribution.\" class=\"wp-image-87854\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_065.png 921w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_065-300x35.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_065-768x88.png 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p> Alternatively, you can align your blockquote from the center: <\/p>\n\n\n\n<pre class=\"wp-block-preformatted src src-html\">&lt;<span style=\"color: #0000ff;\">blockquote<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"blockquote text-center\"<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">p<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"mb-0\"<\/span>&gt;Give me the liberty to know, to utter, and to argue freely according to conscience, above all liberties.&lt;\/<span style=\"color: #0000ff;\">p<\/span>&gt;\n&lt;<span class=\"has-inline-color has-vivid-cyan-blue-color\">br<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">footer<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"blockquote-footer\"<\/span>&gt;John Milton &lt;<span style=\"color: #0000ff;\">cite<\/span> <span style=\"color: #a0522d;\">title<\/span>=<span style=\"color: #8b2252;\">\"Source Title\"<\/span>&gt;<span style=\"font-style: italic;\">Areopagitica<\/span>&lt;\/<span style=\"color: #0000ff;\">cite<\/span>&gt;&lt;\/<span style=\"color: #0000ff;\">footer<\/span>&gt;\n&lt;\/<span style=\"color: #0000ff;\">blockquote<\/span>&gt;\n<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"99\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_066.png\" alt=\"Center aligned text\" class=\"wp-image-87855\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_066.png 1001w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_066-300x30.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_066-768x76.png 768w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"description-list\">Description Lists<\/h2>\n\n\n\n<p>\nDescription lists allows to lay out terms and associated descriptions with a grid.  This is yet another way to represent relationships between different terms in a form that is easier for most readers to comprehend:\n<\/p>\n\n\n\n<pre class=\"wp-block-preformatted src src-html\">&lt;<span style=\"color: #0000ff;\">dl<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"row\"<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">dt<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-3\"<\/span>&gt;Bootstrap&lt;\/<span style=\"color: #0000ff;\">dt<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">dd<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-9\"<\/span>&gt;A CSS framework you can use in Joomla.&lt;\/<span style=\"color: #0000ff;\">dd<\/span>&gt;\n\n  &lt;<span style=\"color: #0000ff;\">dt<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-3\"<\/span>&gt;Using paragraphs as definitons&lt;\/<span style=\"color: #0000ff;\">dt<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">dd<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-9\"<\/span>&gt;\n    &lt;<span style=\"color: #0000ff;\">p<\/span>&gt;First paragraph, describing the element.&lt;\/<span style=\"color: #0000ff;\">p<\/span>&gt;\n    &lt;<span style=\"color: #0000ff;\">p<\/span>&gt;Second paragraph, provides additional information.  It's optional.&lt;\/<span style=\"color: #0000ff;\">p<\/span>&gt;\n  &lt;\/<span style=\"color: #0000ff;\">dd<\/span>&gt;\n\n  &lt;<span style=\"color: #0000ff;\">dt<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-3\"<\/span>&gt;Nest more terms&lt;\/<span style=\"color: #0000ff;\">dt<\/span>&gt;\n  &lt;<span style=\"color: #0000ff;\">dd<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-9\"<\/span>&gt;\n    &lt;<span style=\"color: #0000ff;\">dl<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"row\"<\/span>&gt;\n      &lt;<span style=\"color: #0000ff;\">dt<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-4\"<\/span>&gt;Nested term&lt;\/<span style=\"color: #0000ff;\">dt<\/span>&gt;\n      &lt;<span style=\"color: #0000ff;\">dd<\/span> <span style=\"color: #a0522d;\">class<\/span>=<span style=\"color: #8b2252;\">\"col-sm-8\"<\/span>&gt;Nested definition.&lt;\/<span style=\"color: #0000ff;\">dd<\/span>&gt;\n    &lt;\/<span style=\"color: #0000ff;\">dl<\/span>&gt;\n  &lt;\/<span style=\"color: #0000ff;\">dd<\/span>&gt;\n&lt;\/<span style=\"color: #0000ff;\">dl<\/span>&gt;\n<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"195\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_067.png\" alt=\"Using a description list with Bootstrap in Joomla 4\" class=\"wp-image-87856\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_067.png 750w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/joomla4_Selection_067-300x78.png 300w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Your new Joomla 4 site (whether you are on Joomla VPS hosting or a different plan) comes with the Bootstrap CSS framework built in. This means you can introduce responsive style elements easily into your content. In this article, you will see several helpful Bootstrap typography elements that you can only access by providing a<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\"> Read More ><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4496],"tags":[],"class_list":["post-87850","post","type-post","status-publish","format-standard","hentry","category-joomla-4"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Special Bootstrap Typography in Joomla 4<\/title>\n<meta name=\"description\" content=\"In this article, learn how you can introduce some additional text elements with Bootstrap typography in Joomla 4.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Special Bootstrap Typography in Joomla 4\" \/>\n<meta property=\"og:description\" content=\"In this article, learn how you can introduce some additional text elements with Bootstrap typography in Joomla 4.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-07T19:44:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-17T14:06:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Christopher Maiorana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Maiorana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\"},\"author\":{\"name\":\"Christopher Maiorana\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\"},\"headline\":\"How to Use Special Bootstrap Typography in Joomla 4\",\"datePublished\":\"2021-09-07T19:44:36+00:00\",\"dateModified\":\"2021-11-17T14:06:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\"},\"wordCount\":375,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-1024x538.png\",\"articleSection\":[\"Joomla 4\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\",\"name\":\"How to Use Special Bootstrap Typography in Joomla 4\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-1024x538.png\",\"datePublished\":\"2021-09-07T19:44:36+00:00\",\"dateModified\":\"2021-11-17T14:06:27+00:00\",\"description\":\"In this article, learn how you can introduce some additional text elements with Bootstrap typography in Joomla 4.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use Special Bootstrap Typography in Joomla 4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f\",\"name\":\"Christopher Maiorana\",\"description\":\"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Special Bootstrap Typography in Joomla 4","description":"In this article, learn how you can introduce some additional text elements with Bootstrap typography in Joomla 4.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Special Bootstrap Typography in Joomla 4","og_description":"In this article, learn how you can introduce some additional text elements with Bootstrap typography in Joomla 4.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2021-09-07T19:44:36+00:00","article_modified_time":"2021-11-17T14:06:27+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4.png","type":"image\/png"}],"author":"Christopher Maiorana","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Christopher Maiorana","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/"},"author":{"name":"Christopher Maiorana","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f"},"headline":"How to Use Special Bootstrap Typography in Joomla 4","datePublished":"2021-09-07T19:44:36+00:00","dateModified":"2021-11-17T14:06:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/"},"wordCount":375,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-1024x538.png","articleSection":["Joomla 4"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/","name":"How to Use Special Bootstrap Typography in Joomla 4","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4-1024x538.png","datePublished":"2021-09-07T19:44:36+00:00","dateModified":"2021-11-17T14:06:27+00:00","description":"In this article, learn how you can introduce some additional text elements with Bootstrap typography in Joomla 4.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2021\/09\/How-to-Use-Special-Bootstrap-Typography-in-Joomla-4.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/bootstrap-typography\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"How to Use Special Bootstrap Typography in Joomla 4"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/c6922c56c84e17079fd558e07b7ef72f","name":"Christopher Maiorana","description":"Christopher Maiorana joined the InMotion community team in 2015 and regularly dispenses tips and tricks in the Support Center, Community Q&A, and the InMotion Hosting Blog.","sameAs":["https:\/\/www.linkedin.com\/in\/chris-m-4623144b\/"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/christopherm\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4496,"name":"Joomla 4","slug":"joomla-4","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/joomla\/joomla-4\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=87850"}],"version-history":[{"count":10,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87850\/revisions"}],"predecessor-version":[{"id":91664,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/87850\/revisions\/91664"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=87850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=87850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=87850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}