Beginner Video Tutorial #10 for the Bootstrap framework - Vertical and Horizontal Forms

What Will I Learn?

• You will learn how to create vertical and horizaontal forms.
• You will learn how to use new classes such as control-label.
• You will learn how to use bootstrap grid classes to specify widths to labels and form controls.
• You will learn how to use grid offset classes to line up buttons.
• You will learn how to reduce the size of textboxes using grid classes.

Requirements

• Any text editor, preferably one with syntax highlighting for HTML & CSS (e.g. Adobe Dreamweaver, Notepad ++)
• Latest web browser, preferably Google Chrome.
• I used the Windows operating system but you should be able to do this in Mac.
• You can test your files locally or you can upload to a server and test. If you want to upload to a server, you will need Web hosting as well as an FTP client to upload files (Adobe Dreamweaver has FTP functionality built in).

Difficulty

• Basic

You should already have some understanding of HTML and CSS.

Description

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.

Video Tutorial

Curriculum

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

Bootstrap tutorial 9: Inline Form

---

Posted on Utopian.io - Rewarding Open Source Contributors

---