Die Anleitung zu Bootstrap Border Utility
View more Tutorials:
Border Utility ist ein Teil im Bootstrap. Es baut die Klasse ein, damit der Benutzer die border (Rand) für die Elemente setzt.
Class | Description |
.border | border für 4 Rände des Element setzen. |
.border-left | border für den linken Rand des Element setzen. |
.border-right | border für den rechten Rand des Element setzen. |
.border-top | border für den oberen Rand (top) des Element setzen. . |
.border-bottom | border für den unteren Rand (bottom) des Element setzen. |
.border-left-0 | border für alle Rände außer des linken . |
.border-right-0 | border für alle Rände außer des rechten. |
.border-top-0 | border für alle Rände außer des oberen (top). |
.border-bottom-0 | border für alle Rände außer des unteren (bottom). |

border-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Border Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <style> .container div { margin: 10px; padding :10px; background: #fbfcfc; } </style> </head> <body> <div class="container"> <div class="border "> .border </div> <div class="border-left "> .border-left </div> <div class="border-right "> .border-right </div> <div class="border-top "> .border-top </div> <div class="border-bottom "> .border-bottom </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Es gibt einige Klasse zur Farbensetzung für border , die durch Bootstrap eingebaut werden. Sie können sie in der entsprechenden Kontext benutzen:
- .border-primary
- .border-secondary
- .border-success
- .border-danger
- .border-warning
- .border-info
- .border-light
- .border-dark
- .border-muted
- .border-white

border-color-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Border Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <style> .container div { margin: 10px; padding :10px; background: #ebf5fb; } </style> </head> <body> <div class="container"> <div class="border border-primary"> .border .border-primary </div> <div class="border-left border-danger"> .border-left .border-danger </div> <div class="border-right border-danger"> .border-right .border-danger </div> <div class="border-top border-success"> .border-top .border-success </div> <div class="border-bottom border-info"> .border-bottom .border-info </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Bootstrap definiert keine Klasse zur Einstellung der Breite vom border. Aber Sie können die solchen Klasse selbst definieren, zum Beispiel .border-* (* = 1, 2, 3, ...).
.border-5 { border-width:5px !important; } .border-2 { border-width:2px !important; }

border-width-example.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Border Example</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> <style> .container div { margin: 10px; padding :10px; background: #fbfcfc; } .border-5 { border-width:5px !important; } .border-2 { border-width:2px !important; } </style> </head> <body> <div class="container"> <div class="border border-2"> .border .border-2 </div> <div class="border-left border-5"> .border-left .border-5 </div> <div class="border-right border-2"> .border-right .border-2 </div> <div class="border-top border-5"> .border-top .border-5 </div> <div class="border-bottom border-5"> .border-bottom .border-5 </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </body> </html>
Einige zusätzlichen Klasse hilft Ihnen die Ecke des Element rund machen.
- .rounded
- .rounded-left
- .rounded-right
- .rounded-top
- .rounded-bottom
- .rounded-0

round-example
<div class="container"> <div class="border rounded"> .border .rounded </div> <div class="border rounded-left"> .border-left .rounded-left </div> <div class="border rounded-right"> .border .rounded-right </div> <div class="border rounded-top"> .border .rounded-top </div> <div class="border rounded-bottom"> .border .rounded-bottom </div> <div class="border rounded-circle"> .border-bottom .rounded-circle </div> <div class="border rounded-0"> .border-bottom .rounded-0 </div> </div>