Bootstrap 4 - Bordures
La description
L'utilitaire de bordure fournit le style, la couleur et le rayon de la bordure d'un élément.
Additif et soustractif
La bordure de l'élément peut être ajoutée ou supprimée en utilisant des utilitaires additifs et soustractifs de bordure comme indiqué ci-dessous -
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">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<br>
<div class = "text-white bg-secondary">
<h2>Additive</h2>
<span class = "border">border</span>
<span class = "border-top">border-top</span>
<span class = "border-right">border-right</span>
<span class = "border-bottom">border-bottom</span>
<span class = "border-left">border-left</span>
<br>
<br>
</div>
<div class = "text-white bg-secondary">
<h2>Subtractive</h2>
<span class = "border border-0">border-0</span>
<span class = "border border-top-0">border-top-0</span>
<span class = "border border-right-0">border-right-0</span>
<span class = "border border-bottom-0">border-bottom-0</span>
<span class = "border border-left-0">border-left-0</span>
</div>
</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
Couleur de la bordure
Vous pouvez définir la couleur de la bordure d'un élément en utilisant les couleurs du thème comme indiqué dans l'exemple ci-dessous -
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">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Border Color</h2>
<div class = "bordercolor">
<p>border-primary, border-secondary, border-success</p>
<span class = "">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-primary" >
</span>
<span class = "">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-secondary" >
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-success">
</span>
<br>
<br>
<p>border-danger, border-warning, border-info</p>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-danger">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-warning">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-info">
</span>
<br>
<br>
<p>border-light, border-dark, border-white</p>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-light">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-dark">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-white">
</span>
<br>
</div>
</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
Rayon de la bordure
Vous pouvez ajouter les coins arrondis à un élément en utilisant les classes (arrondi en haut, arrondi à droite, etc.) comme indiqué dans l'exemple ci-dessous -
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>
</head>
<body>
<div class = "container-fluid bg-secondary">
<br>
<h2>Border Radius</h2>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded ">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-top">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-right">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-bottom">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-left">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-circle">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-0">
<br>
<br>
<br>
</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 -