Руководство Bootstrap Border Utility
View more Tutorials:
Border Utility (Утилита границ) это часть Bootstrap, она строит готовые классы, которые помогают пользователям настроить border (Границу) для элементов.
Класс | Описание |
.border | Настроить border для 4 границ элемента. |
.border-left | Настроить border для левой границы элемента. |
.border-right | Настроить border для правой границы элемента. |
.border-top | Настроить border для верхней (top) границы элемента. |
.border-bottom | Настроить border для нижней (bottom) границы элемента. |
.border-left-0 | Настроить border для всех границ, за исключением левой границы. |
.border-right-0 | Настроить border для всех границ, за исключением правой границы. |
.border-top-0 | Настроить border для всех границ, за исключением верхней границы (top). |
.border-bottom-0 | Настроить border для всех границ, за исключением нижней границы (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>
Есть некоторые классы для настройки цвета для border построенный с помощью Bootstrap наготове, вы можете использовать его в походящем контексте:
- .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 не определяет класс для настройки ширины (width) у border. Но вы можете сами определить такие классы, например .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>
Некоторые дополнительные классы помогут вам округлить (round) углы элемента.
- .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>