Font Style
Dropdown Menu Icon
SubMenu List Icon
General Settings
- 11:00am
Attendance
Computer Class
- 11:30am
Added an interest
“Volunteer Activities”
- 12:00pm
Developer Team
Hangouts
- 2:00pm
Responded to need
“In-Kind Opportunity” - 1:30pm
Lunch Break
- 2:38pm
Finish
Go to Home
Light Version
Dark Version
RTL Version
Ericsson University
Sara Hopkins
Webdeveloper
Statistics
$545
27%
English
Spanish
japanese
FranceButtons
Use Bootstrap’s custom button styles for actions in forms,dialogs,and more. Includes support for a handful of contextual variations,sizes,states,and more.
The .btnclasses are designed to be used with the <button>element. However,you can also use these classes on <a>or <input>elements(though some browsers may apply a slightly different rendering).
<ahref="#"class="btn btn-primary"role="button">Link</a><buttonclass="btn btn-primary">Button</button><inputtype="button"class="btn btn-primary"value="Input"/><inputtype="submit"class="btn btn-primary"value="Submit"/><inputtype="reset"class="btn btn-primary"value="Reset"/>Button variations
Use any of the available button classes to quickly create a styled button . We provide a variety of colors for you to express different emotions.
<ahref="#"class="btn btn-primary">Primary</a><ahref="#"class="btn btn-secondary">Secondary</a><ahref="#"class="btn btn-success">Success</a><ahref="#"class="btn btn-info">Info</a><ahref="#"class="btn btn-warning">Warning</a><ahref="#"class="btn btn-danger">Danger</a><ahref="#"class="btn btn-link">Link</a>Disabled buttons
Make buttons look inactive by adding the disabled boolean attribute to any .btnelement. <a>s don’t support the disabled attribute,so you must add the .disabledclass to make it visually appear disabled.
<ahref="#"class="btn btn-primary disabled">Primary</a><ahref="#"class="btn btn-secondary disabled">Secondary</a><ahref="#"class="btn btn-success disabled">Success</a><ahref="#"class="btn btn-info disabled">Info</a><ahref="#"class="btn btn-warning disabled">Warning</a><ahref="#"class="btn btn-danger disabled">Danger</a>Color variations
The classic button,in different colors.
<ahref="#"class="btn btn-blue">Blue</a><ahref="#"class="btn text-white bg-azure">Azure</a><ahref="#"class="btn text-white bg-indigo">Indigo</a><ahref="#"class="btn text-white bg-purple">Purple</a><ahref="#"class="btn text-white bg-pink">Pink</a><ahref="#"class="btn text-white bg-red">Red</a><ahref="#"class="btn text-white bg-orange">Orange</a><ahref="#"class="btn text-white bg-yellow">Yellow</a><ahref="#"class="btn text-white bg-lime">Lime</a><ahref="#"class="btn text-white bg-green">Green</a><ahref="#"class="btn text-white bg-teal">Teal</a>Square buttons
Add .btn-squareto button to remove border-radius.
<ahref="#"class="btn btn-square btn-primary">Primary</a><ahref="#"class="btn btn-square btn-secondary">Secondary</a><ahref="#"class="btn btn-square btn-success">Success</a><ahref="#"class="btn btn-square btn-info">Info</a><ahref="#"class="btn btn-square btn-warning">Warning</a><ahref="#"class="btn btn-square btn-danger">Danger</a>Pill buttons
Add .btn-pillclass to any button to make them more rounded.
<ahref="#"class="btn btn-pill btn-primary">Primary</a><ahref="#"class="btn btn-pill btn-secondary">Secondary</a><ahref="#"class="btn btn-pill btn-success">Success</a><ahref="#"class="btn btn-pill btn-info">Info</a><ahref="#"class="btn btn-pill btn-warning">Warning</a><ahref="#"class="btn btn-pill btn-danger">Danger</a>Outline buttons
In need of a button,but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-*ones to remove all background images and colors on any button.
<ahref="#"class="btn btn-outline-primary">Primary</a><ahref="#"class="btn btn-outline-secondary">Secondary</a><ahref="#"class="btn btn-outline-success">Success</a><ahref="#"class="btn btn-outline-info">Info</a><ahref="#"class="btn btn-outline-warning">Warning</a><ahref="#"class="btn btn-outline-danger">Danger</a>Button size
Add .btn-lgor .btn-smfor additional sizes.
<buttontype="button"class="btn btn-primary btn-lg">Large button</button><buttontype="button"class="btn btn-secondary btn-lg">Large button</button><buttontype="button"class="btn btn-primary btn-sm">Small button</button><buttontype="button"class="btn btn-secondary btn-sm">Small button</button>Create block level buttons—those that span the full width of a parent—by adding .btn-block.
<buttontype="button"class="btn btn-primary btn-block">Block level button</button><buttontype="button"class="btn btn-secondary btn-block">Block level button</button>Button with icon
Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
<buttontype="button"class="btn btn-dark"><iclass="fe fe-upload mr-2"></i>Upload</button><buttontype="button"class="btn btn-warning"><iclass="fe fe-heart mr-2"></i>I like</button><buttontype="button"class="btn btn-success"><iclass="fe fe-check mr-2"></i>I agree</button><buttontype="button"class="btn btn-outline-primary"><iclass="fe fe-plus mr-2"></i>More</button><buttontype="button"class="btn btn-danger"><iclass="fe fe-link mr-2"></i>Link</button><buttontype="button"class="btn btn-info"><iclass="fe fe-message-circle mr-2"></i>Comment</button>Social buttons
<buttontype="button"class="btn btn-facebook"><iclass="fa fa-facebook mr-2"></i>Facebook</button><buttontype="button"class="btn btn-twitter"><iclass="fa fa-twitter mr-2"></i>Twitter</button><buttontype="button"class="btn btn-google"><iclass="fa fa-google mr-2"></i>Google</button><buttontype="button"class="btn btn-youtube"><iclass="fa fa-youtube mr-2"></i>Youtube</button><buttontype="button"class="btn btn-vimeo"><iclass="fa fa-vimeo mr-2"></i>Vimeo</button><buttontype="button"class="btn btn-dribbble"><iclass="fa fa-dribbble mr-2"></i>Dribble</button><buttontype="button"class="btn btn-github"><iclass="fa fa-github mr-2"></i>Github</button><buttontype="button"class="btn btn-instagram"><iclass="fa fa-instagram mr-2"></i>Instagram</button><buttontype="button"class="btn btn-pinterest"><iclass="fa fa-pinterest mr-2"></i>Pinterest</button><buttontype="button"class="btn btn-vk"><iclass="fa fa-vk mr-2"></i>VKontakte</button><buttontype="button"class="btn btn-rss"><iclass="fa fa-rss mr-2"></i>RSS</button><buttontype="button"class="btn btn-flickr"><iclass="fa fa-flickr mr-2"></i>Flickr</button><buttontype="button"class="btn btn-bitbucket"><iclass="fa fa-bitbucket mr-2"></i>Bitbucket</button>You can use only icons.
<buttontype="button"class="btn btn-icon btn-facebook"><iclass="fa fa-facebook"></i></button><buttontype="button"class="btn btn-icon btn-twitter"><iclass="fa fa-twitter"></i></button><buttontype="button"class="btn btn-icon btn-google"><iclass="fa fa-google"></i></button><buttontype="button"class="btn btn-icon btn-youtube"><iclass="fa fa-youtube"></i></button><buttontype="button"class="btn btn-icon btn-vimeo"><iclass="fa fa-vimeo"></i></button><buttontype="button"class="btn btn-icon btn-dribbble"><iclass="fa fa-dribbble"></i></button><buttontype="button"class="btn btn-icon btn-github"><iclass="fa fa-github"></i></button><buttontype="button"class="btn btn-icon btn-instagram"><iclass="fa fa-instagram"></i></button><buttontype="button"class="btn btn-icon btn-pinterest"><iclass="fa fa-pinterest"></i></button><buttontype="button"class="btn btn-icon btn-vk"><iclass="fa fa-vk"></i></button><buttontype="button"class="btn btn-icon btn-rss"><iclass="fa fa-rss"></i></button><buttontype="button"class="btn btn-icon btn-flickr"><iclass="fa fa-flickr"></i></button><buttontype="button"class="btn btn-icon btn-bitbucket"><iclass="fa fa-bitbucket"></i></button>Icon buttons
Icon only button. Add .btn-iconclass to remove unnecessary padding from button.
<buttontype="button"class="btn btn-icon btn-primary"><iclass="fe fe-activity"></i></button><buttontype="button"class="btn btn-icon btn-primary btn-github"><iclass="fe fe-github"></i></button><buttontype="button"class="btn btn-icon btn-primary btn-success"><iclass="fe fe-bell"></i></button><buttontype="button"class="btn btn-icon btn-primary btn-warning"><iclass="fe fe-star"></i></button><buttontype="button"class="btn btn-icon btn-primary btn-danger"><iclass="fe fe-trash"></i></button><buttontype="button"class="btn btn-icon btn-primary btn-purple"><iclass="fe fe-bar-chart"></i></button><buttontype="button"class="btn btn-icon btn-primary btn-secondary"><iclass="fe fe-git-merge"></i></button>Button dropdown
Wrap the dropdown’s toggle(your button or link) and the dropdown menu within .dropdown,or another element that declares position:relative;. Dropdowns can be triggered from <a>or <button>elements to better fit your potential needs.
<divclass="dropdown"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"><iclass="fe fe-calendar"></i></button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Dropdown link</a><aclass="dropdown-item"href="#">Dropdown link</a></div></div><divclass="dropdown"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown"><iclass="fe fe-calendar mr-2"></i>Show calendar </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Dropdown link</a><aclass="dropdown-item"href="#">Dropdown link</a></div></div><divclass="dropdown"><buttontype="button"class="btn btn-secondary dropdown-toggle"data-toggle="dropdown">Show calendar </button><divclass="dropdown-menu"><aclass="dropdown-item"href="#">Dropdown link</a><aclass="dropdown-item"href="#">Dropdown link</a></div></div>List of buttons
You can now create a list of buttons with the .btn-listcontainer.
<divclass="btn-list"><ahref="#"class="btn btn-success">Save changes</a><ahref="#"class="btn btn-secondary">Save and continue</a><ahref="#"class="btn btn-danger">Cancel</a></div>If the list is very long,it will automatically wrap on multiple lines,while keeping all buttons evenly spaced.
<divclass="btn-list"><ahref="#"class="btn btn-secondary">One</a><ahref="#"class="btn btn-secondary">Two</a><ahref="#"class="btn btn-secondary">Three</a><ahref="#"class="btn btn-secondary">Four</a><ahref="#"class="btn btn-secondary">Five</a><ahref="#"class="btn btn-secondary">Six</a><ahref="#"class="btn btn-secondary">Seven</a><ahref="#"class="btn btn-secondary">Eight</a><ahref="#"class="btn btn-secondary">Nine</a><ahref="#"class="btn btn-secondary">Ten</a><ahref="#"class="btn btn-secondary">Eleven</a><ahref="#"class="btn btn-secondary">Twelve</a><ahref="#"class="btn btn-secondary">Thirteen</a><ahref="#"class="btn btn-secondary">Fourteen</a><ahref="#"class="btn btn-secondary">Fifteen</a><ahref="#"class="btn btn-secondary">Sixteen</a><ahref="#"class="btn btn-secondary">Seventeen</a><ahref="#"class="btn btn-secondary">Eighteen</a><ahref="#"class="btn btn-secondary">Nineteen</a></div>Use the .text-centeror the .text-rightmodifiers to alter the alignment.
<divclass="btn-list text-center"><ahref="#"class="btn btn-primary">Save changes</a><ahref="#"class="btn btn-secondary">Save and continue</a></div><divclass="btn-list text-right"><ahref="#"class="btn btn-primary">Save changes</a><ahref="#"class="btn btn-secondary">Save and continue</a></div>