<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container mt-4" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2>Notice</h2> <div class="border-left border-primary pl-3 py-2 bg-light w-100 mb-3" style="border-left-width: 5px !important;"> <h5 class="mb-1 font-weight-bold">Big Notice</h5> </div> <div class="border-left border-success pl-3 py-2 bg-light w-100 mb-3" style="border-left-width: 5px !important;"> <h5 class="mb-1 font-weight-bold">Big Notice</h5> <p class="mb-0 text-muted">Sol taraftaki çizgi artık daha belirgin ve kalın.</p> </div> <p>Merhaba</p> <div class="border-left border-danger pl-3 py-3 bg-white shadow-sm w-100" style="border-left-width: 8px !important;"> <h5 class="text-danger font-weight-bold">DİKKAT!</h5> <p class="mb-0">Bu kutu hem kalın çizgili hem de hafif gölgelidir.</p> </div> <div class="notice mt-3"> <h5>Big Notice</h5> </div> <div class="notice bg-warning mt-3"> <h5>Big Notice</h5> </div> </div> </div>

.notice { border-left: 5px solid #007bff; /* border-left + border-primary + 5px */ padding-left: 1rem; /* pl-3 */ padding-top: 0.5rem; /* py-2 (üst) */ padding-bottom: 0.5rem; /* py-2 (alt) */ background-color: #f8f9fa; /* bg-light */ width: 100%; /* w-100 */ margin-bottom: 1rem; /* mb-3 */ } .notice h5 { margin-bottom: 0.25rem; /* mb-1 */ font-weight: bold; /* font-weight-bold */ }