Bootstrap 4 Texto/Tipografia
Configurações padrão do Bootstrap 4
O Bootstrap 4 usa um padrão
font-sizede 16px e
line-heighté 1,5.
O padrão font-familyé "Helvetica Neue", Helvetica, Arial, sem serifa.
Além disso, todos os <p>elementos têm
margin-top: 0e margin-bottom: 1rem(16px por padrão).
<h1> - <h6>
Bootstrap 4 estilos de cabeçalhos HTML ( <h1>a
<h6>) com um peso de fonte mais ousado e um tamanho de fonte aumentado:
Exemplo
h1 Bootstrap heading (2.5rem = 40px)
h2 Bootstrap heading (2rem = 32px)
h3 Bootstrap heading (1.75rem = 28px)
h4 Bootstrap heading (1.5rem = 24px)
h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Exibir títulos
Os cabeçalhos de exibição são usados para se destacar mais do que os cabeçalhos normais (tamanho de fonte maior e peso de fonte mais leve), e há quatro classes para escolher: .display-1, .display-2, .display-3,.display-4
Exemplo
Display 1
Display 2
Display 3
Display 4
<pequeno>
No Bootstrap 4, o elemento HTML <small>é usado para criar um texto secundário mais leve em qualquer título:
Exemplo
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<marca>
O Bootstrap 4 estilizará o elemento HTML <mark>com uma cor de fundo amarela e algum preenchimento:
Exemplo
Use the mark element to highlight text.
<abr>
O Bootstrap 4 estilizará o <abbr>elemento HTML com uma borda pontilhada na parte inferior:
Exemplo
The WHO was founded in 1948.
<blockquote>
Adicione a .blockquoteclasse a a <blockquote>
ao citar blocos de conteúdo de outra fonte:
Exemplo
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
<dl>
O Bootstrap 4 estilizará o elemento HTML <dl>da seguinte maneira:
Exemplo
- Coffee
- - black hot drink
- Milk
- - white cold drink
<código>
O Bootstrap 4 estilizará o elemento HTML <code>da seguinte maneira:
Exemplo
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
O Bootstrap 4 estilizará o elemento HTML <kbd>da seguinte maneira:
Exemplo
Use ctrl + p to open the Print dialog box.
<pré>
O Bootstrap 4 estilizará o elemento HTML <pre>da seguinte maneira:
Exemplo
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Mais aulas de tipografia
As classes do Bootstrap 4 abaixo podem ser adicionadas para estilizar ainda mais os elementos HTML:
| Class | Description | Example |
|---|---|---|
.font-weight-bold |
Bold text | |
.font-weight-bolder |
Bolder text | |
.font-italic |
Italic text | |
.font-weight-light |
Light weight text | |
.font-weight-lighter |
Lighter weight text | |
.font-weight-normal |
Normal text | |
.lead |
Makes a paragraph stand out | |
.small |
Indicates smaller text (set to 80% of the size of the parent) | |
.text-left |
Indicates left-aligned text | |
.text-*-left |
Indicates left-aligned text on small, medium, large or xlarge screens | |
.text-break |
Prevents long text from breaking layout | |
.text-center |
Indicates center-aligned text | |
.text-*-center |
Indicates center-aligned text on small, medium, large or xlarge screens | |
.text-decoration-none |
Removes the underline from a link | |
.text-right |
Indicates right-aligned text | |
.text-*-right |
Indicates right-aligned text on small, medium, large or xlarge screens | |
.text-justify |
Indicates justified text | |
.text-monospace |
Monospaced text | |
.text-nowrap |
Indicates no wrap text | |
.text-lowercase |
Indicates lowercased text | |
.text-reset |
Resets the color of a text or a link (inherits the color from its parent) | |
.text-uppercase |
Indicates uppercased text | |
.text-capitalize |
Indicates capitalized text | |
.initialism |
Displays the text inside an <abbr> element in a slightly smaller font size |
|
.list-unstyled |
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well) |
|
.list-inline |
Places all list items on a single line (used together with
.list-inline-item on each <li> elements) |
|
.pre-scrollable |
Makes a <pre> element scrollable |
Referência CSS completa do Bootstrap 4
Para uma referência completa de todas as classes CSS disponíveis no Bootstrap 4, visite nosso Bootstrap 4 All Classes Reference .