Suggested Video Tutorials
Part 29 - Bootstrap breadcrumbs
Part 30 - Bootstrap pager and pagination
Part 31 - Bootstrap panels
In this video we will discuss Bootstrap well component.
Bootstrap well component gives the content inside it, the sunken effect. This component is generally used to make a section of the content on the page to stand out from the rest of the content.
Creating a well : To create a well, create a <div> element with class well and place your content inside it.
Creating wells with different sizes : To increase or decrease padding or the radius of the rounded corners use well-lg or well-sm classes. If these classes are not used, then the defaults are applied.
Form controls in a well : To place form controls in a well, simply wrap them in a <div> element which has the class well. We discussed forms in Part 20 of Bootstrap tutorial.
Changing the well background colour : To change the background colour of the well, change the background-color style in the well class in your custom stylesheet.
Part 29 - Bootstrap breadcrumbs
Part 30 - Bootstrap pager and pagination
Part 31 - Bootstrap panels
In this video we will discuss Bootstrap well component.
Bootstrap well component gives the content inside it, the sunken effect. This component is generally used to make a section of the content on the page to stand out from the rest of the content.
Creating a well : To create a well, create a <div> element with class well and place your content inside it.
![bootstrap well examples](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_zIomJbi68tKfeLpy9xy9ZOSujnAf_khpAX7b94anXn1qzI3t8ZiSrbAKqT3FdS96nXDcnSCQzypyE6BBtD0oWDrsxHAO_FoZFpAM0N3Hzh9dUuKbSvrD-PkKX3v6f-INxI0Lc7m7KF-D/s1600/bootstrap+well+examples.png)
<div class="well">
Bootstrap is a free, open-source and is the
most popular HTML, CSS, and JavaScript framework developed by twitter for
creating responsive web applications.
</div>
Creating wells with different sizes : To increase or decrease padding or the radius of the rounded corners use well-lg or well-sm classes. If these classes are not used, then the defaults are applied.
![twitter bootstrap well size](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8drgY_B3HaLJZBmWQ49NNVFyOq49dGtLY38cUdRh7M5haWEFDhPfzfWG8tf_iVGO5NjhDd0OPLolrTYCXAgJsFxHgFMCMBV9MeC_ZzFCp1fyFKn6fc0VzST4jDZMy22eCbdBfXbLxlPj-/s1600/twitter+bootstrap+well+size.png)
<div class="well
well-lg">
I am in a LARGE WELL with increased padding
and radius
</div>
<div class="well">
I am in a DEFAULT WELL with default padding
and radius
</div>
<div class="well
well-sm">
I am in a SMALL WELL with reduced padding
and radius
</div>
Form controls in a well : To place form controls in a well, simply wrap them in a <div> element which has the class well. We discussed forms in Part 20 of Bootstrap tutorial.
![twitter bootstrap well form-horizontal](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuHWSMwrwGPNIBVaD4x_mOZi-skD-3BeUXaRnIRMtXtDallu5ET3zLrXJFVkPwOj5sEyQ8Q6G-NWofCGkfwSRT3L5wGAJJgR1r63rKldTxRa71qrlB6a4_zKyDQ7B0igxGX9gRFHPHAGN5/s1600/twitter+bootstrap+well+form-horizontal.png)
<div class="well
well-sm">
<h3>Login Form</h3>
<hr />
<form class="form-horizontal">
<div class="form-group">
<label for="inputUserName" class="control-label col-sm-2">Username</label>
<div class="col-sm-10">
<input class="form-control" placeholder="Login Username"
type="text" id="inputUserName" />
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label col-sm-2">Password</label>
<div class="col-sm-10">
<input class="form-control" placeholder="Login Password"
type="password" id="inputPassword" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2
col-sm-10">
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
</div>
Changing the well background colour : To change the background colour of the well, change the background-color style in the well class in your custom stylesheet.
![bootstrap change well background color](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggeFsII2SlmOo05V_wfpIdWHGhFPiH_YamIJ0LWTF3Uiqb3wEw2INCaus5pQsUb01rEXsushA_3-_e_AZCld-MamdNHRR2hyphenhyphenay_NCA8P12nfBqvzYKzsL3X_p4v-HlceNOUdel9dU6Z8Ic/s1600/bootstrap+change+well+background+color.png)
.well {
background-color: #DDDF7C;
}
![bootstrap tutorial for beginners](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_03fbnWvW2zvfwA1f2qr0lAcU_tqV-0TcxHuTxHR37oSpIKPhyQkmsA6Dv8POqdnRpxs-G76aI9MiZgnazPGmzB4mOukWlc-9BWjarWMee69te9QcFt2GyIGUnfweX_cDQh4Zf-cGvjJY/s1600/bootstrap+tutorial+for+beginners.png)
No comments:
Post a Comment
It would be great if you can help share these free resources