Bootstrap 4 Button

Button with link

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

Examples


  • Video Tutorial on Buttons


<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>


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