Buttons on Bootstrap Theme

Single button:

 

Primary

Default

Warning

Danger

Success

Info

These are the built-in css coloured buttons available on bootstrap.

 

Button in a Block

The buttons could also be displayed in a block which adapts to a container width by adding the btn-block class.

 

How

Single button:

<a class="btn btn-primary" href="/drupal-nwu">Text on the button</a>

The word primary could be replaced with one of the following to change the colour:

  • default
  • warning
  • danger
  • success
  • info

Button block:

<div class="row"><div class="col-sm-4"><p><a class="btn btn-primary btn-block" href="/drupal-nwu">Primary</a></p>

        <p><a class="btn btn-default btn-block" href="/drupal-nwu">Default</a></p>
    </div>

    <div class="col-sm-4"><p><a class="btn btn-warning btn-block" href="/drupal-nwu">Warning</a></p>

        <p><a class="btn btn-danger btn-block" href="/drupal-nwu">Danger</a></p>
    </div>

    <div class="col-sm-4"><p><a class="btn btn-success btn-block" href="/drupal-nwu">Success</a></p>

        <p><a class="btn btn-info btn-block" href="/drupal-nwu">Info</a></p>
    </div>
</div>