Bootstrap 4 Button

Button with link

Jquery Home
<a href=site_map.php  class='btn btn-outline-info'>Jquery Home</a>

Examples

<button type='button' class='btn btn-primary'>Primary</button>
<button type='button' class='btn btn-secondary'>Secondary</button>
<button type='button' class='btn btn-success'>Success</button>
<button type='button' class='btn btn-danger'>Danger</button>
<button type='button' class='btn btn-warning'>Warning</button>
<button type='button' class='btn btn-info'>Info</button>
<button type='button' class='btn btn-light'>Light</button>
<button type='button' class='btn btn-dark'>Dark</button>

<button type='button' class='btn btn-link'>Link</button>
Buttons used as links ( all buttons are linked to Jquery Home page )
Home Secondary Success Danger Warning Info Light Dark Link
<a href=site_map.php class='btn btn-primary'>Home </a>
<a href=site_map.php class='btn btn-secondary'>Secondary</a>
<a href=site_map.php class='btn btn-success'>Success</a>
<a href=site_map.php class='btn btn-danger'>Danger</a>
<a href=site_map.php class='btn btn-warning'>Warning</a>
<a href=site_map.php class='btn btn-info'>Info</a>
<a href=site_map.php class='btn btn-light'>Light</a>
<a href=site_map.php class='btn btn-dark'>Dark</a>

<a href=site_map.php class='btn btn-link'>Link</a>

Outline buttons

<button type='button' class='btn btn-outline-primary'>Primary</button>
<button type='button' class='btn btn-outline-secondary'>Secondary</button>
<button type='button' class='btn btn-outline-success'>Success</button>
<button type='button' class='btn btn-outline-danger'>Danger</button>
<button type='button' class='btn btn-outline-warning'>Warning</button>
<button type='button' class='btn btn-outline-info'>Info</button>
<button type='button' class='btn btn-outline-light'>Light</button>
<button type='button' class='btn btn-outline-dark'>Dark</button>
These buttons can be used as links like this
JQuery Home
<a href=site_map.php  class='btn btn-outline-primary'>JQuery Home</a>

Button Size

<button type='button' class='btn btn-danger btn-lg'>Large button</button>
<button type='button' class='btn btn-warning btn-sm'>Small button</button>
<button type='button' class='btn btn-primary btn-lg btn-block'>Block level</button>

Disabled buttons

<button type='button' class='btn  btn-danger' disabled>I am Disabled </button>


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