Sunday, March 22, 2015

Well in Bootstrap

Well is a container that helps the content to present sunken or an inset effect on the pages. Well can be created easily by wrapping the content that is to be presented in the well with a <div> element by adding a class .well. The size of the well can also be changed by using some optional class like well-lg. 

Syntax:
<div class = "well" > content </div>  

Example:

 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>joeandy's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">  
 </head>  
 <body>  
 <div class="container">  
 <h1> Example of a well</h1>  
 <div class="well well-lg">Hi, am in large well feed me some content !!</div>  
 <div class="well well-sm">Hi, am in small well feed me some content !!</div>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html> 

No comments:

Post a Comment