Botones

Ejemplos Básicos Utiliza cualquiera de las clases de botones para crear un botón estilizado de manera sencilla.

  • You can put anything here

Esquema de colores de Bootstrap



Colores Opcionales de Material Design



Tamaños de botones

Si ocupas botones más grandes o mas pequeños, puedes agregar las clases de tamaño de botón.



Deshabilitado

                        

Bootstrap Color Schemes

<button class="btn btn-default">Default</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>


Optional Material Design Colors

<button class="btn bgm-cyan">Cyan</button>
<button class="btn bgm-teal">Teal</button>
<button class="btn bgm-amber">Amber</button>
<button class="btn bgm-orange">Orange</button>
<button class="btn bgm-deeporange">Deep Orange</button>
<button class="btn bgm-red">Red</button>
<button class="btn bgm-pink">Pink</button>
<button class="btn bgm-lightblue">Light Blue</button>
<button class="btn bgm-blue">Blue</button>
<button class="btn bgm-indigo">Indigo</button>
<button class="btn bgm-lime">Lime</button>
<button class="btn bgm-lightgreen">Light Green</button>
<button class="btn bgm-green">Green</button>
<button class="btn bgm-purple">Purple</button>
<button class="btn bgm-deeppurple">Deep Purple</button>
<button class="btn bgm-gray">Gray</button>
<button class="btn bgm-bluegray">Blue Gray</button>
<button class="btn bgm-black">Black</button>


Button Sizes

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Extra Small</button>


Disable Stat

<button class="btn btn-default" disabled="disabled">Default</button>
<button class="btn btn-info" disabled="disabled">Info</button>
<button class="btn btn-primary" disabled="disabled">Primary</button>
<button class="btn btn-success" disabled="disabled">Success</button>
<button class="btn btn-warning" disabled="disabled">Warning</button>
<button class="btn btn-danger" disabled="disabled">Danger</button>

Botones con icono Puedes revisar la lista completa de íconos en la sección Iconos.











                        
TODOS EN ORDEN:

<button class="btn btn-default btn-icon-text"><i class="md md-home"></i> Home</button>
<button class="btn btn-default btn-icon-text"><i class="md md-search"></i> Search</button>
<button class="btn btn-default btn-icon-text"><i class="md md-more-vert"></i> More</button>
<button class="btn btn-default btn-icon-text"><i class="md md-arrow-forward"></i> Forward</button>
<button class="btn btn-default btn-icon-text"><i class="md md-arrow-back"></i> Back</button>
<button class="btn btn-default btn-icon-text"><i class="md md-sync"></i> Sync</button>
<button class="btn btn-default btn-icon-text"><i class="md md-check"></i> Check</button>
<button class="btn btn-default btn-icon-text"><i class="md md-close"></i> Check</button>
<button class="btn btn-default btn-icon-text"><i class="md md-menu"></i> Menu</button>
<button class="btn btn-default btn-icon-text"><i class="md md-apps"></i> Apps</button>
<button class="btn btn-default btn-icon-text"><i class="md md-done-all"></i> Done</button>
<button class="btn btn-default btn-icon-text"><i class="md md-trending-up"></i> Up</button>
<button class="btn btn-default btn-icon-text"><i class="md md-get-app"></i> Get</button>
<button class="btn btn-default btn-icon-text"><i class="md md-call"></i> Call</button>

<button class="btn btn-default"><i class="md md-home"></i></button>
<button class="btn btn-default"><i class="md md-search"></i></button>
<button class="btn btn-default"><i class="md md-more-vert"></i></button>
<button class="btn btn-default"><i class="md md-arrow-forward"></i></button>
<button class="btn btn-default"><i class="md md-arrow-back"></i></button>
<button class="btn btn-default"><i class="md md-sync"></i></button>
<button class="btn btn-default"><i class="md md-check"></i></button>
<button class="btn btn-default"><i class="md md-close"></i></button>
<button class="btn btn-default"><i class="md md-menu"></i></button>
<button class="btn btn-default"><i class="md md-apps"></i></button>
<button class="btn btn-default"><i class="md md-done-all"></i></button>
<button class="btn btn-default"><i class="md md-trending-up"></i></button>
<button class="btn btn-default"><i class="md md-get-app"></i></button>
<button class="btn btn-default"><i class="md md-call"></i></button>

<button class="btn btn-primary"><i class="md md-home"></i></button>
<button class="btn btn-info"><i class="md md-search"></i></button>
<button class="btn btn-success"><i class="md md-more-vert"></i></button>
<button class="btn btn-warning"><i class="md md-arrow-forward"></i></button>
<button class="btn btn-danger"><i class="md md-arrow-back"></i></button>
<button class="btn bgm-teal"><i class="md md-sync"></i></button>
<button class="btn bgm-orange"><i class="md md-check"></i></button>
<button class="btn bgm-cyan"><i class="md md-close"></i></button>
<button class="btn bgm-lightgreen"><i class="md md-menu"></i></button>
<button class="btn bgm-lime"><i class="md md-apps"></i></button>
<button class="btn bgm-amber"><i class="md md-done-all"></i></button>
<button class="btn bgm-gray"><i class="md md-trending-up"></i></button>
<button class="btn bgm-lightblue"><i class="md md-get-app"></i></button>
<button class="btn bgm-deeporange"><i class="md md-call"></i></button>

<button class="btn btn-default btn-icon"><i class="md md-home"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-search"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-more-vert"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-arrow-forward"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-arrow-back"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-sync"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-check"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-close"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-menu"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-apps"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-done-all"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-trending-up"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-get-app"></i></button>
<button class="btn btn-default btn-icon"><i class="md md-call"></i></button>

<button class="btn btn-primary btn-icon"><i class="md md-home"></i></button>
<button class="btn btn-info btn-icon"><i class="md md-search"></i></button>
<button class="btn btn-success btn-icon"><i class="md md-more-vert"></i></button>
<button class="btn btn-warning btn-icon"><i class="md md-arrow-forward"></i></button>
<button class="btn btn-danger btn-icon"><i class="md md-arrow-back"></i></button>
<button class="btn bgm-teal btn-icon"><i class="md md-sync"></i></button>
<button class="btn bgm-orange btn-icon"><i class="md md-check"></i></button>
<button class="btn bgm-cyan btn-icon"><i class="md md-close"></i></button>
<button class="btn bgm-lightgreen btn-icon"><i class="md md-menu"></i></button>
<button class="btn bgm-lime btn-icon"><i class="md md-apps"></i></button>
<button class="btn bgm-amber btn-icon"><i class="md md-done-all"></i></button>
<button class="btn bgm-gray btn-icon"><i class="md md-trending-up"></i></button>
<button class="btn bgm-lightblue btn-icon"><i class="md md-get-app"></i></button>
<button class="btn bgm-deeporange btn-icon"><i class="md md-call"></i></button>

Botones de bloque Puedes generar un botón de bloque - que ocupa el ancho completo del padre - agregando .btn-block.



                        
<button class="btn btn-default btn-block">Default</button>

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

Grupos de Botones Puedes agrupar una serie de botones juntos en una sola líneacon el button group.

Ejemplo Básico



Barra de herramientas de botones

Combina '.btn-group.' en una '.btn-toolbar' para componentes mas complejos.





Tamaño de Grupo de Botones

En vez de aplicar clases de tamaño de botón a cada botón de un grupo, solo agrega '.btn-group-*' a cada '.btn-group', incluyendo cuando embebas grupos múltiples.







Grupos de Botones Justificados

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.





Embeber

Pon un '.btn-group' dentro de otro '.btn-group' cuando quieras menus dropdown mezclados con una serie de botones. 

                        
Basic Example
<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-info">Left</button>
    <button type="button" class="btn btn-info">Middle</button>
    <button type="button" class="btn btn-info">Right</button>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-success">Left</button>
    <button type="button" class="btn btn-success">Middle</button>
    <button type="button" class="btn btn-success">Right</button>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-warning">Left</button>
    <button type="button" class="btn btn-warning">Middle</button>
    <button type="button" class="btn btn-warning">Right</button>
</div>

Button Toolbars
<div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">4</button>
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">7</button>
        <button type="button" class="btn btn-default">8</button>
        <button type="button" class="btn btn-default">9</button>
    </div>
</div>

Button Group Sizing
<div class="btn-group btn-group-lg" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-group btn-group-lg" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>


<div class="btn-group btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-group btn-group" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>


<div class="btn-group btn-group-sm" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-group btn-group-sm" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>


<div class="btn-group btn-group-xs" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

<div class="btn-group btn-group-xs" role="group">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

Justified Button Groups
<div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Right</button>
    </div>
</div>


<div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Left</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Middle</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Right</button>
    </div>
</div>

Nesting
<div class="btn-group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>

    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>


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

    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>