Bootstrap4 text layout

Default Settings: The default font-size is 16px and the default line-height is 1.5. The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif. Margin-top: 0, margin-bottom: 1rem (16px) for all

elements.

1.<h1> - <h6>

All HTML headers (H1 through H6) are styled in Bootstrap.

<div class="container">
  <h1>H1 Bootstrap title (2.5rem = 40px)</h1>
  <h2>H2 Bootstrap title (2rem = 32px)</h2>
  <h3>H3 Bootstrap Title (1.75rem = 28px)</h3>
  <h4>H4 Bootstrap Title (1.5rem = 24px)</h4>
  <h5>H5 Bootstrap Title (1.25rem = 20px)</h5>
  <h6>H6 Bootstrap title (1rem = 16px)</h6>
</div>
Copy the code
2, Display title class

Bootstrap also provides four Display classes to control the header style:.display-1,.display-2,.display-3, and.display-4.

<div class="container">
  <h1>Display the title</h1>
  <p>The Display header can output larger and bolder font styles.</p>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
</div>
Copy the code
3,<small>

In Bootstrap 4, the element is used to create smaller text with lighter colors:

<div class="container">
  <h1>Smaller text headings</h1>
  <p>The small element is used for smaller, lighter text:</p>       
  <h1>H1 title<small>subtitle</small></h1>
  <h2>H2 heading<small>subtitle</small></h2>
  <h3>H3 title<small>subtitle</small></h3>
  <h4>H4 title<small>subtitle</small></h4>
  <h5>H5 title<small>subtitle</small></h5>
  <h6>H6 title<small>subtitle</small></h6>
</div>
Copy the code
4,<mark>

Bootstrap 4 defines as a yellow background with a certain margin:

<div class="container">
    <h1>The highlighted text</h1>    
    <p>Use the mark element to<mark>The highlighted</mark>The text.</p>
</div>
Copy the code
5,<abbr>

Bootstrap 4 defines the style of the element as a dashed border displayed at the bottom of the text:

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
Copy the code
6,<dl>

Bootstrap 4 defines the following styles for

elements: 
<div class="container">
  <h1>Description Lists</h1>    
  <p>The dl element indicates a description list:</p>
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>
Copy the code
7,<code>

Bootstrap 4 defines the elements as follows:

<div class="container"> <h1> Code snippet </h1> <p> You can put some code elements inside the code element :</p> <p> <code>span</code>, <code>section</code>, and <code>div</code> are used to define part of the document content. </p> </div>Copy the code
More layout
The name of the class describe
.font-weight-bold Bold text
.font-weight-normal Plain text
.font-weight-light More detailed text
.font-italic Italic text
.lead Make paragraphs stand out
.small Specify smaller text (85% of the parent element)
.text-left The left
.text-center In the middle
.text-right Align right
.text-justify Set text alignment and wrap text beyond the screen in paragraphs
.text-nowrap No line breaks in paragraphs that are off screen
.text-lowercase Set text to lowercase
.text-uppercase Capitalize text
.text-capitalize Capitalize the first letter of the word
.initialism Displayed in the<abbr>The text in the element is displayed in small font, and lowercase letters can be converted to uppercase letters
.list-unstyled Remove the default list style, align list items left (<ul> 和 <ol>). This class only applies to direct sublist items (if you need to remove nested list items, you need to use this style in the nested list)
.list-inline Place all list items on the same line
.pre-scrollable make<pre>Element is scrollable. The maximum height of the code block area is 340px. Once the height is exceeded, a scrollbar appears on the Y-axis

Bootstrap Image style

Bootstrap provides three classes for applying simple styles to images:

  • Img – rounded: addborder-radius:6pxTo get rounded corners
  • Img – circle: addborder-radius:50%To make the whole picture a circle
  • Img-thumbnail: Add some padding and a gray border
<img> 类

The following classes can be used in any image

class describe
.img-rounded Adding rounded corners to images (not supported in IE8)
.img-circle Turn the image into a circle (not supported in IE8)
.img-thumbnail Thumbnail function
.img-responsive Image responsive (well extended to parent elements)