Bootstrap 4 - Texte
La description
Bootstrap fournit des utilitaires de texte pour contrôler l'alignement du texte, sa transformation, son poids, etc.
Alignement du texte
Le texte peut être justifié en utilisant la classe .text-justify et pour l'alignement gauche, droit et central du texte, utilisez respectivement les classes text-left , text-right et text-center .
L'exemple suivant illustre l'utilisation des utilitaires d'alignement de texte -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
<style type = "text/css"></style>
</head>
<body>
<div class = "container">
<h2>Text alignment: Text Justify </h2>
<p class = "text-success">
The below text is justified by using the class "text-justify"
</p>
<p class = "text-justify">
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. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h2>Text alignment: Left, Right, Center </h2>
<p class = "text-left">Text is aligned on Left side by using class "text-left"</p>
<p class = "text-center">Text is aligned at Center by using class "text-center"</p>
<p class = "text-right">Text is aligned on Right side by using class "text-right"</p>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Transformation de texte
Vous pouvez transformer le texte en utilisant des classes de capitalisation de texte comme indiqué dans l'exemple suivant -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
<style type = "text/css"></style>
</head>
<body>
<div class = "container">
<h2>Text Transform</h2>
<p>Welcome to
<span class = "text-lowercase">tutorialspoint (text-lowercase)</span>.
</p>
<p>Welcome to
<span class = "text-uppercase">tutorialspoint (text-uppercase)</span>
</p>
<p>Welcome to
<span class = "text-capitalize">tutorials-point (text-capitalize)</span>
</p>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity =" sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -
Production
Épaisseur de la police, italique et monospace
Vous pouvez modifier l'épaisseur de la police du texte à l'aide de la classe font-weight- * et mettre en italique le texte à l'aide de la classe font-italic . La police monospace crée un texte de largeur fixe, qui occupe la même quantité d'espace horizontal.
L'exemple suivant montre l'utilisation des utilitaires ci-dessus -
Exemple
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
<style type = "text/css"></style>
</head>
<body>
<div class = "container">
<h2>Font weight and italics</h2>
<p>
This text is <span class = "font-weight-bold">font-weight-bold </span>
</p>
<p>
This text is <span class = "font-weight-normal">font-weight-normal</span>
</p>
<p>
This text is <span class = "font-weight-light">font-weight-light</span>
</p>
<p>
This text is <span class = "font-italic">font-italic</span>
</p>
<h2>Monospace</h2>
<p class = "text-monospace">
This text is written by using 'text-monospace' class
</p>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Il produira le résultat suivant -