Buttons

Please follow this link to view all bootstrap 4 framework classes


        <button class="btn btn-primary">btn-primary</button> 

        <button class="btn btn-secondary">btn-secondary</button> 

        <button class="btn btn-success">btn-success</button> 

        <button class="btn btn-info">btn-info</button> 

        <button class="btn btn-warning">btn-warning</button> 

        <button class="btn btn-danger">btn-danger</button> 

        <button class="btn btn-dark">btn-dark</button> 

        <button class="btn btn-light">btn-light</button> 

        <button class="btn btn-white">btn-white</button> 

        <button class="btn btn-third">btn-third</button> 

        <button class="btn btn-fourth">btn-fourth</button> 

        <button class="btn btn-fifth">btn-fifth</button>


        <button class="btn btn-outline-primary">btn-outline-primary</button> 

        <button class="btn btn-outline-secondary">btn-outline-secondary</button> 

        <button class="btn btn-outline-success">btn-outline-success</button> 

        <button class="btn btn-outline-info">btn-outline-info</button> 

        <button class="btn btn-outline-warning">btn-outline-warning</button> 

        <button class="btn btn-outline-danger">btn-outline-danger</button> 

        <button class="btn btn-outline-dark">btn-outline-dark</button> 

        <button class="btn btn-outline-light">btn-outline-light</button> 

        <button class="btn btn-outline-white">btn-outline-white</button> 

        <button class="btn btn-outline-third">btn-outline-third</button> 

        <button class="btn btn-outline-fourth">btn-outline-fourth</button> 

        <button class="btn btn-outline-fifth">btn-outline-fifth</button>

Button Button Button Button


      <a class="btn btn-info btn-sm" href="#"> 

      <i class="icon ion-android-lock"></i> 

      Button

      </a>

      <a class="btn btn-primary" href="#">

      <i class="icon ion-android-calendar"></i>

      Button 

      </a> 

      <a class="btn btn-success btn-lg" href="#">

      <i class="icon ion-android-drafts"></i>

      Button 

      </a> 

      <a class="btn btn-danger" href="#">
      Button

      <i class="icon ion-android-contact"></i> 

      </a>

Wavies Color

<button class="btn btn-lg btn-white m-btn-waves-float waves-primary">Primary</button>
<button class="btn btn-lg btn-white m-btn-waves-float waves-secondary">Secondary</button>
<button class="btn btn-lg btn-white m-btn-waves-float waves-success">Success</button>
<button class="btn btn-lg btn-white m-btn-waves-float waves-info">Info</button>
<button class="btn btn-lg btn-white m-btn-waves-float waves-warning">Warning</button>
<button class="btn btn-lg btn-white m-btn-waves-float waves-danger">Danger</button>

<button class="btn btn-lg btn-white m-btn-waves waves-primary">Primary</button>
<button class="btn btn-lg btn-white m-btn-waves waves-secondary">Secondary</button>
<button class="btn btn-lg btn-white m-btn-waves waves-success">Success</button>
<button class="btn btn-lg btn-white m-btn-waves waves-info">Info</button>
<button class="btn btn-lg btn-white m-btn-waves waves-warning">Warning</button>
<button class="btn btn-lg btn-white m-btn-waves waves-danger">Danger</button>

Primary Buttons

<button class="btn btn-lg btn-white m-btn-waves-float">White</button>
<button class="btn btn-lg btn-primary m-btn-waves-float">Primary</button>
<button class="btn btn-lg btn-secondary m-btn-waves-float">Secondary</button>
<button class="btn btn-lg btn-success m-btn-waves-float">Success</button>
<button class="btn btn-lg btn-info m-btn-waves-float">Info</button>
<button class="btn btn-lg btn-warning m-btn-waves-float">Warning</button>
<button class="btn btn-lg btn-danger m-btn-waves-float">Danger</button>

Primary Outline Buttons

<button class="btn btn-lg btn-outline-primary m-btn-waves-float">Primary</button>
<button class="btn btn-lg btn-outline-secondary m-btn-waves-float">Secondary</button>
<button class="btn btn-lg btn-outline-success m-btn-waves-float">Success</button>
<button class="btn btn-lg btn-outline-info m-btn-waves-float">Info</button>
<button class="btn btn-lg btn-outline-warning m-btn-waves-float">Warning</button>
<button class="btn btn-lg btn-outline-danger m-btn-waves-float">Danger</button>

Secondary Buttons

<button class="btn btn-lg btn-third m-btn-waves-float">Third</button>
<button class="btn btn-lg btn-fourth m-btn-waves-float">Fourth</button>
<button class="btn btn-lg btn-fifth m-btn-waves-float">Fifth</button>

<button class="btn btn-lg btn-outline-third m-btn-waves-float">Third</button>
<button class="btn btn-lg btn-outline-fourth m-btn-waves-float">Fourth</button>
<button class="btn btn-lg btn-outline-fifth m-btn-waves-float">Fifth</button>

Social Hover Button


          <div class="m-hvr-circle-region bg-primary"> 

          <a href="https://www.facebook.com/pages/Inroads-LLC/123794954233" class="btn m-btn-top-left" target="_blank"> 

          <i class="fab fa-facebook-f"></i> 

          </a> 

          <a href="https://twitter.com/InroadsUS" class="btn m-btn-top-right" target="_blank"> 

          <i class="fab fa-twitter"></i> 

          </a> 

          <a href="https://www.linkedin.com/company/inroads-llc-" class="btn m-btn-bottom-right" target="_blank"> 

          <i class="fab fa-linkedin-in"></i> 

          </a> 

          <a href="https://www.youtube.com/channel/UCONGYmrcq6AWzuJl8ll5-gg" class="btn m-btn-bottom-left" target="_blank"> 

          <i class="fab fa-youtube"></i> 

          </a> 

          </div>


        <button class="btn btn-primary btn-rounded btn-sm">btn-primary</button> 

        <button class="btn btn-secondary btn-rounded">btn-secondary</button> 

        <button class="btn btn-success btn-rounded btn-lg">btn-success</button>

<button class="btn btn-primary btn-lg">btn-primary btn-lg</button>
<button class="btn btn-primary btn-sm">btn-primary btn-sm</button>


        <button class="btn btn-primary btn-block">btn-primary btn-block</button> 

        <button class="btn btn-success btn-block">btn-success btn-block</button>

disabled


      <button type="button" class="btn btn-primary btn-lg" data-toggle="button" aria-pressed="false" 

      Single toggle

      </button>

      <a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">disabled</a>

Radio 1 (preselected) Radio 2 Radio 3


        <div class="btn-group btn-group-toggle" data-toggle="buttons"> 

        <label class="btn btn-secondary active"> 

        <input type="radio" name="options" id="option1" checked> Radio 1 (preselected) 

        </label> 

        <label class="btn btn-secondary"> 

        <input type="radio" name="options" id="option2" Radio 2 

        </label> 

        <label class="btn btn-secondary"> 

        <input type="radio" name="options" id="option3" Radio 3 

        </label> 

        </div>

Buttons Group


        <div class="btn-group" role="group" aria-label="Basic example"> 

        <button type="button" class="btn btn-secondary">Left</button> 

        <button type="button" class="btn btn-secondary">Middle</button> 

        <button type="button" class="btn btn-secondary">Right</button> 

        </div>


        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> 

        <div class="btn-group mr-2" role="group" aria-label="First group"> 

        <button type="button" class="btn btn-secondary">1</button> 

        <button type="button" class="btn btn-secondary">2</button> 

        <button type="button" class="btn btn-secondary">3</button> 

        <button type="button" class="btn btn-secondary">4</button> 

        </div> <div class="btn-group mr-2" role="group" aria-label="Second group"> 

        <button type="button" class="btn btn-secondary">5</button> 

        <button type="button" class="btn btn-secondary">6</button> 

        <button type="button" class="btn btn-secondary">7</button> 

        </div> <div class="btn-group" role="group" aria-label="Third group"> 

        <button type="button" class="btn btn-secondary">8</button> </div>
        </div>


        <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> 

        <button type="button" class="btn btn-secondary">1</button> 

        <button type="button" class="btn btn-secondary">2</button> 

        <div class="btn-group" role="group"> 

        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 

        Dropdown 

        </button> 

        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> 

        <a class="dropdown-item" href="#">Dropdown link</a> 

        <a class="dropdown-item" href="#">Dropdown link</a> 

        </div> </div> 

        </div>


          <div class="btn-group-vertical" role="group" aria-label="Button group with nested dropdown"> 

          <button type="button" class="btn btn-secondary">Button 1</button> 

          <button type="button" class="btn btn-secondary">Button 2</button> 

          <div class="btn-group" role="group"> 

          <button id="btnGroupDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">  

          Dropdown  

          </button> 

          <div class="dropdown-menu" aria-labelledby="btnGroupDrop2"> 

          <a class="dropdown-item" href="#">Dropdown link</a> 

          <a class="dropdown-item" href="#">Dropdown link</a> 

          </div> </div> <button type="button" class="btn btn-secondary">Button 3</button> 

          <button type="button" class="btn btn-secondary">Button 4</button> </div>


        <div class="btn-group"> <button type="button" class="btn btn-primary">Action</button>

        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <span class="sr-only">Toggle Dropdown</span>

        </button>

        <div class="dropdown-menu">

        <a class="dropdown-item" href="#">Action</a>

        <a class="dropdown-item" href="#">Another action</a>

        <a class="dropdown-item" href="#">Something else here</a>

        <div class="dropdown-divider"></div>

        <a class="dropdown-item" href="#">Separated link</a>

        </div>

        </div>

Website

About Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamt.

Contact Info

Thomas Kinkade Signature Gallery of New England

274 South Street
Shrewsbury, MA 01545

5083440133
Email Us!