BootStrap Text Classes

We explained in our previous topic that BootStrap applies styles to some html tags. In addition, there are many css classes that can be used optionally.

The following examples show you how some basic tags and classes look with bootstrap.

- Classes that can be used for Text Color: You can change the text color by applying the named classes to the elements you want.

text-muted class of bootstrap.

text-primary class of bootstrap.

text-success class of bootstrap.

text-info class of bootstrap.

text-warning class of bootstrap.

text-danger class of bootstrap.

- Classes That Can Be Used for Background Color: You can change the background color by applying the named classes to the elements you want.

Paragraph applied class bg-primary

Paragraph applied class bg-success 

Paragraph applied class bg-info 

Paragraph applied class bg-warning 

Paragraph applied class bg-danger 

- Small Tag: Allows us to add secondary text by using inside title tags.

Title Secondary Text

- Mark Tag: Used to highlight text with a fill color.

This is a text highlighted.

- Blockquote and Footer Tags: Blockquote is used to show a content by quoting. The source can also be specified with the footer tag.

- Code Tag:

With BootStrap code tag will be shown like here.

- Kbd Tag:

ctrl + alt + del are the keys you can use to exit.

- Pre Tag: .

The text between the pre tags will look like this. 
The text between the pre tags will look like this. 

- .small class: Makes the applied text 85% smaller than normal.

This is.small class applied paragraph.

This is a normal paragraph.

- Classes Used in Text Alignment: CSS classes used to align texts to the right, left, center and sides:

.text-center class applied to this text.

.text-left class applied to this text.

.text-right class applied to this text.

.text-justify class applied to this text.

 .text-nowrap class: It keeps the text in a single line by preventing it from going under even when it doesn't fit where it is.

text.nowrap class applied to this text. You can resize the browser window to see the difference.

Text Case Conversions: Classes that make the text appear all uppercase, all lowercase, or the first letter of words capitalized:

.text-lowercase With this class all letters in this text appear as lowercase.

.text-uppercase With class all letters in this text appear as uppercase

.text-capitalize With this class, the first letters of the words in this text appear as capital letters.

 .list-unstyled class: In lists created with ol and ul tags, it removes the leading numbers - signs and the left margin. Below you see a list of ul.

• Sentence 1
• Sentence 2
• Sentence 3

 .list-inline class: It allows all elements to be placed side by side in ordered and unordered lists (ol-ul). Below is a list of ul and all its elements appear side by side.

• Sentence 1
• Sentence 2
• Sentence 3

EXERCISES