Bootstrap border

We used one box and manage its border by applying different style properties. Here is one standard box and its basic style my_box.
Sample
<style>
.my_box{ 
position: relative;
margin:8px;
width:80px;
height: 80px;
padding:10px;
background-color: #f1f1f1;
}</style> 
Using this sample box with basic style property my_box and boostrap grid system we will generate sample codes to manage border property.

Border of different sides

We can add border to all sides or to any specific side
All
Top
Right
Bottom
Left
<div class='my_box border'>All</div> 
<div class='my_box border-top'>Top</div>
<div class='my_box border-right'>Right</div>
<div class='my_box border-bottom'>Bottom</div>
<div class='my_box border-bottom'>Left</div>

Remove Borders

Remove border from specific side
All
Top
Right
Bottom
Left
<div class='my_box border border-0'>All</div> 
<div class='my_box border border-top-0'>Top</div>
<div class='my_box border border-right-0'>Right</div>
<div class='my_box border border-bottom-0'>Bottom</div>
<div class='my_box border border-bottom-0'>Left</div>

Border Colour

primary
secondary
success
danger
warning
info
dark
light
white
<div class='my_box border border-primary'>primary</div> 
<div class='my_box border border-secondary'>secondary</div>
<div class='my_box border border-success'>success</div>
<div class='my_box border border-danger'>danger</div>
<div class='my_box border border-warning'>warning</div>
<div class='my_box border border-info'>info</div>
<div class='my_box border border-dark'>dark</div>
<div class='my_box border border-light'>light</div>
<div class='my_box border border-white'>white</div>

Rounded corners border

All
top
right
bottom
left
circle
0
<div class='my_box rounded'>All</div> 
<div class='my_box rounded-top'>top</div> 
<div class='my_box rounded-right'>right</div>
<div class='my_box rounded-bottom'>bottom</div>
<div class='my_box rounded-left'>left</div> 
<div class='my_box rounded-circle'>circle</div> 
<div class='my_box rounded-0'>0</div>


plus2net.com









Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer