• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Buttons

June 17, 2014 //  by Sutha Kaliannan//  Leave a Comment

The button is used for creating button control which defines clickable action. The buttons are integral part of HTML which selects the elements that are of type button. The Bootstrap provides different types of buttons to specify different states of button. The following are available button classes to style a button in the Bootstrap:

  • Default: It is default button.
  • Primary: It defines visual weight and primary action in the set of buttons.
  • Success: It defines successful message when action completes successfully.
  • Info: It is used to define informational alert messages.
  • Warning:It indicates warning the user about risks with use of the associated item on the web page.
  • Danger: It indicates caution when there is a negative action on the web page.

Following example demonstrates how to customize default buttons:

also read:

  • Bootstrap Setup
  • Bootstrap Typography
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Default Buttons Example</h2>
<button type="button" class="btn btn-default">Default Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Informational Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
</div>
</body>
</html>

The above script specifies different types of buttons available in the Bootstrap which defines different styles for the buttons.

  • Run Bootstrap Default Buttons Demo

Default Buttons Example

Changing Sizes of Buttons

The Bootstrap provides facility of changing sizes of buttons by using additional classes .btn-lg, .btn-sm and .btn-xs. The following example demonstrates how to define different sizes of buttons on the web page:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Large Buttons</h2>
	<button type="button" class="btn btn-default btn-lg">Default Button</button>
	<button type="button" class="btn btn-primary btn-lg">Primary Button</button>
	<button type="button" class="btn btn-success btn-lg">Success Button</button>
	<button type="button" class="btn btn-info btn-lg">Informational Button</button>
	<button type="button" class="btn btn-warning btn-lg">Warning Button</button>
	<button type="button" class="btn btn-danger btn-lg">Danger Button</button>
<hr>
<h2>Small Buttons</h2>
	<button type="button" class="btn btn-default btn-sm">Default Button</button>
	<button type="button" class="btn btn-primary btn-sm">Primary Button</button>
	<button type="button" class="btn btn-success btn-sm">Success Button</button>
	<button type="button" class="btn btn-info btn-sm">Informational Button</button>
	<button type="button" class="btn btn-warning btn-sm">Warning Button</button>
	<button type="button" class="btn btn-danger btn-sm">Danger Button</button>
<hr>
<h2>Extra Small Buttons</h2>
	<button type="button" class="btn btn-default btn-xs">Default Button</button>
	<button type="button" class="btn btn-primary btn-xs">Primary Button</button>
	<button type="button" class="btn btn-success btn-xs">Success Button</button>
	<button type="button" class="btn btn-info btn-xs">Informational Button</button>
	<button type="button" class="btn btn-warning btn-xs">Warning Button</button>
	<button type="button" class="btn btn-danger btn-xs">Danger Button</button>
</div>
</body>
</html>

The above code uses .btn-lg, .btn-sm and .btn-xs classes to define different sizes of buttons. The .btn-lg class is used to create large size of buttons, the .btn-sm class is used to create small size of buttons and the .btn-xs class is used to create extra small size of buttons on the web page.

  • Run Bootstrap Changing Size Buttons Demo

Large Buttons Example
Small Buttons Example
Extra Small Buttons Example

Block level Buttons

We can use block level buttons to use full width of container within which the button is residing by using the class .btn-block. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Block Level Buttons</h2>
<button type="button" class="btn btn-default btn-lg btn-block">Default Button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Primary Button</button><hr>
<button type="button" class="btn btn-success btn-sm btn-block">Success Button</button>
<button type="button" class="btn btn-info btn-sm btn-block">Informational Button</button><hr>
<button type="button" class="btn btn-warning btn-xs btn-block">Warning Button</button>
<button type="button" class="btn btn-danger btn-xs btn-block">Danger Button</button>
</div>
</body>
</html>
  • Run Bootstrap Block Level Buttons Demo

Extra Small Buttons Example

Active State

The buttons will be active when they will appear as pressed with darker border and inset shadow. This can be done by using .active on button. We could also use anchor element to show that it is activated. The following is an example:

]
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
  <link rel="stylesheet" type="text/css" href="myclass.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Active Buttons</h2>
	<button type="button" class="btn btn-default active">default Button</button>
	<button type="button" class="btn btn-primary active">primary Button</button>
	<button type="button" class="btn btn-success active">success Button</button><hr>
	<a href="#" class="btn btn-info btn-sm active ">link one</button></a>
	<a href="#" class="btn btn-warning btn-sm active">link second</button></a>
	<a href="#" class="btn btn-danger btn-sm active">link three</button></a>
</div>
</body>
</html>
  • Run Bootstrap Active Buttons Demo

Active Buttons Example

Disabled State

We can disable the button by using disabled attribute to buttons. When a button is disabled, it appears dimmed and does not respond to user input. To disable button, we write as disabled=”disabled” within the button element. We cannot enter any value in that field. The following is an example:

 <!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Disabled Buttons</h2>
	<button type="button" class="btn btn-default btn-lg" disabled="disabled">Default Button</button>
	<button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary Button</button><hr>
	<button type="button" class="btn btn-success btn-sm" disabled="disabled">Success Button</button>
	<button type="button" class="btn btn-info btn-sm" disabled="disabled">Informational Button</button><hr>
	<button type="button" class="btn btn-warning btn-xs" disabled="disabled">Warning Button</button>
	<button type="button" class="btn btn-danger btn-xs" disabled="disabled">Danger Button</button>
</div>
</body>
</html>
  • Run Bootstrap Disabled Buttons Demo

Disabled Buttons Example

Button Tags

We can also use button classes with <a>,<button> or <input> elements to use buttons as tags. It is recommended that use it only with <button> element to ensure cross browser rendering. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Tags</h2>
	<a href="#" class="btn btn-default btn-lg">link one</button></a>
	<a href="#" class="btn btn-primary btn-lg">link second</button></a><hr>
	<button class="btn btn-success btn-sm" type="submit">Button one</button>
	<button class="btn btn-warning btn-sm" type="submit">Button two</button><hr>
	<input class="btn btn-info btn-xs" type="button" value="This is input">
	<input class="btn btn-danger btn-xs" type="submit" value="This is submit">
</div>
</body>
</html>
  • Run Bootstrap Button Tags Demo

Button Tags Example

Category: BootstrapTag: Bootstrap Basics

About Sutha Kaliannan

Previous Post: « Read Only / Write Only Operations using Spring Data Repository Services
Next Post: Introduction to Grails »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact