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>


Subscribe

* indicates required
Subscribe to plus2net

    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


    JQuery Video Tutorials




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