15 Useful Bootstrap HTML Snippets


Twitter’s frontend framework Bootstrap is everywhere. It is extremely popular among developers. With the recent release of Bootstrap 4, the framework now supports an array of exciting new CSS features including flexbox. If you are building a website from scratch or converting a PSD to HTML, you might want to use Bootstrap. Here I am going to list 15 Bootstrap HTML snippets that you can quickly add to your existing Bootstrap project.

1. Password Show-hide

See the Pen Bootstrap Password Show-hide by Abhisek Dutta (@0xfa1l) on CodePen.

2. Sign up form

See the Pen mjrjJJ by Abhisek Dutta (@0xfa1l) on CodePen.

3. Bootstrap Responsive Megamenu

See the Pen Responsive Bootstrap mega menu by Martin Stanek (@skywalkapps) on CodePen.

4. Bootstrap Contact Form with Validation

See the Pen Bootstrap 3 Contact form with Validation by Jay (@jaycbrf) on CodePen.

5. Bootstrap Login Form

See the Pen Bootstrap Snippet: Login Form by Ace Subido (@ace-subido) on CodePen.

6. Bootstrap Sidebar Navigation

See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.

7. Bootstrap Button Toggle

See the Pen Bootstrap Button Toggle (On/Off Switch) by Aanjulena Sweet (@aanjulena) on CodePen.

8. Bootstrap Pricing Table

See the Pen Bootstrap Pricing Table by Sahar Ali Raza (@mrsahar) on CodePen.

9. Touch Friendly Radio Buttons and Checkboxes

See the Pen Touch Friendly Bootstrap Radio buttons and Checkboxes by Brian Sassaman (@BrianSassaman) on CodePen.

10. Simple Payment Form use Bootstrap

See the Pen Simple Payment Form use Bootstrap by llgruff (@llgruff) on CodePen.

11. Bootstrap Vertical Tabs

See the Pen Bootstrap Vertical Tabs by Josh Adamous (@joshadamous) on CodePen.

12. Bootstrap Cover Template

See the Pen Bootstrap Cover Template by Victor (@viktorsnt) on CodePen.

13. Twitter Bootstrap 3.2.0 Callouts

See the Pen Twitter Bootstrap 3.2.0 Callouts by Chris Pratt (@chrisdpratt) on CodePen.

14. Bootstrap Responsive Timeline

See the Pen Responsive Bootstrap 3 Timeline by MrPirrera (@pirrera) on CodePen.

15. Custom Bootstrap 4 Card

See the Pen Custom Bootstrap 4 card by Peter Daniš (@peterdanis) on CodePen.


All these snippets are very straight-forward in its approach and almost all of them are responsive by nature. You may need to put custom styles to suit your need.