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>

Websites Built to Give your Business a Rocket Boost

Website

Information

Services

Contact Info

Inroads

205-B Broadway Street
Frederick, MD 21701

301-473-9750
Email Us!