JavaBeat

  • Home
  • 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)
  • Privacy

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.

[code lang=”xml”]
<!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>
[/code]

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

[code lang=”xml”]
<!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>
[/code]

  • Run Bootstrap Sizing Well Example

Bootstrap Sizing Well Example

Filed Under: Bootstrap Tagged With: 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.

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.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved