• 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 Wells

July 19, 2014 //  by Krishna Srinivasan//  Leave a Comment

A well is a container which causes simple effect on an element to give an inset effect on the page. To create a well, Bootstrap provides class called .well which can be used with div element.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

The below examples shows the various techniques used for implementing the wells in Bootstrap. If you have any questions about bootstrap wells, please write it in the comments section.

Bootstrap Default Well

The following example shows creation of default well by using the class .well within the div element.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Default Well</h2>
<div class="well">
   It's in Well!!!
</div>
</body>
</html>
  • Run Bootstrap Default Well Example

Bootstrap Default Well Example

Bootstrap Well Sizing

We can make wells with different sizes like larger size well and smaller size well by using .well-lg and .well-sm classes in conjunction with .well class. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</style>
</head>
<body>
<div class="container">
<h2>Sizing Well</h2>
   <div class="well well-lg">
      This is in Larger Well!!!
   </div>
   <div class="well well-sm">
      This is in Smaller Well!!!
   </div>
</body>
</html>
  • Run Bootstrap Sizing Well Example

Bootstrap Sizing Well Example

Category: BootstrapTag: Bootstrap Components

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Java Currency Class Example
Next Post: Bootstrap Panels »

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