Beginner Video Tutorial #9 for the Bootstrap framework - Inline Form

In this series of tutorials you will learn how to create a complete website based on the Bootstrap framework. Bootstrap is a very popular HTML, CSS and Javascript framework for building responsive websites that can be viewed on different devices.

In the previous eight tutorials, you have learned how to set up a page using classes for containers, centering text, images and buttons, as well as how to use the Bootstrap grid system to design your website to make it responsive to different devices. You have set up a customised navigation bar with scroll by to track viewing location. Some of the components you have played with include: Jumbotrons to place emphasis on important headings/messages, Popovers as another form of interactivity, and Carousels to provide another user experience with scrolling images.

The content we will cover in lesson 9 are as follows:

• What an inline form is.
• The components of a form e.g. label, input.
• Different attributes in the input tag e.g. type, id, name, placeholder.
• Bootstrap classes for forms such as form-line and form-control, and form-group.
• Customising the CSS style the form (e.g. color of text in the textbox).

Links to previous tutorials:

Bootstrap tutorial 1: Container-fluid

Bootstrap tutorial 2: Images, buttons

Bootstrap tutorial 3: Grid system

Bootstrap tutorial 4: Adding a navigation bar

Bootstrap tutorial 5: Jumbotron, Scroll spy

Bootstrap tutorial 6: Styling the Navbar

Bootstrap tutorial 7: Popovers

Bootstrap tutorial 8: Carousel

---

For more tutorials by the Magic Monk, visit http://magicmonk.org

1000+ Tutorial Videos
9+ Million Views
20,000+ Subscribers

---

Posted on Utopian.io - Rewarding Open Source Contributors

---