Book Image

Bootstrap Essentials

By : Snig Bhaumik
Book Image

Bootstrap Essentials

By: Snig Bhaumik

Overview of this book

<p>As the number of people using mobile devices to access the internet grows every moment, websites are no longer built just for desktop machines. The mobile first philosophy demands that sites are fully compatible with all the available, and predicted future mobile devices. Bootstrap allows and easily enables you to design and develop your own websites congenial to all devices, including e-readers, tablets, and so on.</p> <p>This book will familiarize you with all the features, functionalities, and architectural knowledge of the Bootstrap platform, enabling you to develop mobile friendly websites. You will begin by discovering the mobile first philosophy and what Bootstrap is. You will learn about Bootstrap’s architecture and components, and how to use Bootstrap using LESS. You will create responsive layouts using Bootstrap CSS and work with the packaged components that come along with Bootstrap. You will proceed to explore the various JavaScript components and add-ons offered by Bootstrap. Finally, you will learn how to customize Bootstrap easily to match your project-specific requirements,compile and build your Bootstrap code, and extend Bootstrap with different extensions to create more advanced websites.</p> <p>By the end of this book, you will be able to build, compile, and customize your own Bootstrap system to create mobile friendly websites.</p>
Table of Contents (15 chapters)
Bootstrap Essentials
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Constructing data entry forms


Forms are integral parts of a web page – whenever you need to capture any information from the user you need to create a web form in your page. Bootstrap offers a variety of ways to design and create HTML forms for both mobile devices and desktops.

Let's create a Contact Us form for our web application. Here is our code:

<form>
  <div class="form-group">
    <label for="yourName" class="control-label">Name</label>
    <input type="text" class="form-control" id="yourName" placeholder="Your name please">
  </div>
  <div class="form-group">
    <label for="yourEmail" class="control-label">Email address</label>
    <input type="email" class="form-control" id="yourEmail" placeholder="Your Email Id">
  </div>
  <div class="form-group">
    <label for="yourComments" class="control-label">Tell us</label>
    <textarea class="form-control" id="yourComments" placeholder="Your commments...