Script Tutorials

Bootstrap Forms

—

by

admin
in

Bootstrap forms, do you know them? Our new article is for beginners and will show the process of creating pages using the bootstrap. Also we will tell you what is bootstrap, its purpose, installing, and the process of designing forms.

GETTING START WITH BOOTSTRAP FORMS

Content

  • What is bootstrap
  • Components of bootstrap
  • Importance of bootstrap
  • Downloading bootstrap
  • Bootstrapping a form
  • Download resources

INTRODUCTION

WHAT IS BOOTSTRAP

The BOOTSTRAP official website is being updated at interval and it includes a clear definition for now which states that “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” It is an html, css, javascript framework that you can use as basis for creating web sites or web applications.

COMPONENTS OF BOOTSTRAP

From the definition given to BOOTSTRAP above you and I have seen that bootstrap is no other thing than a web kit that assist web designers and developers in achieving an appealing aesthetic outlook in their day to day web projects

From the image above notice that officially bootstrap file structure or organisation contains below listed

  1. CSS – encompasses of .css file frameworks
  2. FONTS – glyph-icons (icon fonts)
  3. JS – comprises of jQuery and Javascript files

IMPORTANCE OF BOOTSTRAP

Easy to use

Even if you are not an expert web designer or developer bootstrap get you covered to achieving that beautiful Responsive web outlook you desire. Learn to how design an aesthetic website interface / outlook easy and simple in our next tutorials using bootstrap

Optimisation

They load fast because of their small file size and thorough compressed jQuery, CSS and Javascript files since it maintains consistency to design and code between projects and between developers

Supports

They’re supported in all browsers (even back to IE6). It Ensure cross-browser compatibility

DOWNLOADING BOOTSTRAP

Getting started: Go to bootstrap official website and the bootstrap zip file and unzip it in any directory of your choice and remember the file organisation it is importance for protocols.

BOOTSTRAPPING A FORM

GETTING STARTED WITH BOOTSTRAP FORM

Now let’s create a responsive form using bootstraps

  1. Create a folder named ‘forms‘
  2. Create another folder named ‘assets‘
     in the ‘forms‘Open that folder and create two .css files respectively app.css and style.css

    i. app.css
    copy and paste the following below codes in the app.css file

    001 /*
    002 Script-Tutorials - Responsive Bootstrap Template
    003  * Author: Godwin Okeagu @script-tutorials
    004  * Website: https://www.script-tutorials.com
    005 */
    006 /*Breaks
    007 ------------------------------------*/
    008 hr {
    009   margin: 30px 0;
    010 }
    011 /*Headings
    012 ------------------------------------*/
    013 h1 {
    014   font-size: 28px;
    015   line-height: 35px;
    016 }
    017 h2 {
    018   font-size: 24px;
    019   line-height: 33px;
    020 }
    021 h3 {
    022   font-size: 20px;
    023   line-height: 27px;
    024 }
    025 h4 {
    026   line-height: 25px;
    027 }
    028 h5 {
    029   line-height: 20px;
    030 }
    031 h6 {
    032   line-height: 18px;
    033 }
    034 .font-open-sans {
    035   font-family: "Open Sans", Arial, sans-serif;
    036 }
    037 h1, h2, h3, h4, h5, h6 {
    038   color: #555;
    039   margin-top: 5px;
    040   text-shadow: none;
    041   font-weight: normal;
    042   font-family: "Open Sans", Arial, sans-serif;
    043 }
    044 h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
    045   margin-right: 5px;
    046 }
    047 /*Devider
    048 ------------------------------------*/
    049 .devider.devider-dotted {
    050   border-top: 2px dotted #eee;
    051 }
    052 .devider.devider-dashed {
    053   border-top: 2px dashed #eee;
    054 }
    055 .devider.devider-db {
    056   height: 5px;
    057   border-top: 1px solid #eee;
    058   border-bottom: 1px solid #eee;
    059 }
    060 .devider.devider-db-dashed {
    061   height: 5px;
    062   border-top: 1px dashed #ddd;
    063   border-bottom: 1px dashed #ddd;
    064 }
    065 .devider.devider-db-dotted {
    066   height: 5px;
    067   border-top: 1px dotted #ddd;
    068   border-bottom: 1px dotted #ddd;
    069 }
    070 /*Tables
    071 ------------------------------------*/
    072 /*Basic Tables*/
    073 .table thead > tr > th {
    074   border-bottom: none;
    075 }
    076 @media (max-width: 768px) {
    077   .table th.hidden-sm,
    078   .table td.hidden-sm {
    079     display: none !important;
    080   }
    081 }
    082 /*Forms
    083 ------------------------------------*/
    084 .form-control {
    085   box-shadow: none;
    086   border-radius: 0;
    087 }
    088 .input-group-addon {
    089   border-radius: 0;
    090 }
    091 .form-control:focus {
    092   border-color: #bbb;
    093   box-shadow: 0 0 2px #c9c9c9;
    094 }
    095 /*Form Spacing*/
    096 .form-spacing .form-control {
    097   margin-bottom: 15px;
    098 }
    099 /*Form Icons*/
    100 .input-group-addon {
    101   color: #b3b3b3;
    102   font-size: 14px;
    103   background: #fff;
    104 }
    105 /*Button Styles
    106 ------------------------------------*/
    107 .btn {
    108   box-shadow: none;
    109   border-radius: 0;
    110 }
    111 .btn-u {
    112   border: 0;
    113   color: #fff;
    114   font-size: 14px;
    115   cursor: pointer;
    116   font-weight: 400;
    117   padding: 6px 13px;
    118   position: relative;
    119   background: #00d2ff;
    120   white-space: nowrap;
    121   display: inline-block;
    122   text-decoration: none;
    123 }
    124 .btn-u:hover {
    125   color: #fff;
    126   text-decoration: none;
    127   transition: all 0.3s ease-in-out;
    128 }
    129 .btn-u.btn-block {
    130   text-align: center;
    131 }
    132 /*Button Groups*/
    133 .btn-group .dropdown-menu > li > a {
    134   padding: 3px 13px;
    135 }
    136 .btn-group > .btn-u,
    137 .btn-group-vertical > .btn-u {
    138   float: left;
    139   position: relative;
    140 }
    141 .btn-group > .btn-u:first-child {
    142   margin-left: 0;
    143 }
    144 /*For FF Only*/
    145 @-moz-document url-prefix() {
    146   .footer-subscribe .btn-u {
    147     padding-bottom: 4px;
    148   }
    149 }
    150 @media (max-width: 768px) {
    151   @-moz-document url-prefix() {
    152     .btn-u {
    153       padding-bottom: 6px;
    154     }
    155   }
    156 }
    157 /*Buttons Color*/
    158 .btn-u:hover,
    159 .btn-u:focus,
    160 .btn-u:active,
    161 .btn-u.active,
    162 .open .dropdown-toggle.btn-u {
    163   background: #5fb611;
    164 }
    165 .btn-u-split.dropdown-toggle {
    166   border-left: solid 1px #5fb611;
    167 }
    168 .btn-u.btn-u-blue {
    169   background: #3498db;
    170 }
    171 .btn-u.btn-u-blue:hover,
    172 .btn-u.btn-u-blue:focus,
    173 .btn-u.btn-u-blue:active,
    174 .btn-u.btn-u-blue.active,
    175 .open .dropdown-toggle.btn-u.btn-u-blue {
    176   background: #2980b9;
    177 }
    178 .btn-u.btn-u-split-blue.dropdown-toggle {
    179   border-left: solid 1px #2980b9;
    180 }
    181 .btn-u.btn-u-green {
    182   background: #2ecc71;
    183 }
    184 .btn-u.btn-u-green:hover,
    185 .btn-u.btn-u-green:focus,
    186 .btn-u.btn-u-green:active,
    187 .btn-u.btn-u-green.active,
    188 .open .dropdown-toggle.btn-u.btn-u-green {
    189   background: #2ecc71;
    190 }
    191 .btn-u.btn-u-split-green.dropdown-toggle {
    192   border-left: solid 1px #2ecc71;
    193 }
    194 .btn-u.btn-u-default {
    195   background: #95a5a6;
    196 }
    197 .btn-u.btn-u-default:hover,
    198 .btn-u.btn-u-default:focus,
    199 .btn-u.btn-u-default:active,
    200 .btn-u.btn-u-default.active,
    201 .open .dropdown-toggle.btn-u.btn-u-default {
    202   background: #7f8c8d;
    203 }
    204 .btn-u.btn-u-split-default.dropdown-toggle {
    205   border-left: solid 1px #7f8c8d;
    206 }
    207 /*Bordered Buttons*/
    208 .btn-u.btn-brd {
    209   color: #555;
    210   background: none;
    211   padding: 5px 13px;
    212   border: solid 1px transparent;
    213 }
    214 .btn-u.btn-brd-width-2 {
    215   padding: 7px 18px;
    216   border-width: 2px;
    217 }
    218 .btn-u.btn-brd:hover {
    219   background: none;
    220 }
    221 .btn-u.btn-brd:focus {
    222   background: none;
    223 }
    224 .btn-u.btn-brd.btn-brd-hover:hover {
    225   color: #fff !important;
    226 }
    227 .btn-u.btn-brd {
    228   border-color: #00d2ff;
    229 }
    230 .btn-u.btn-brd:hover {
    231   color: #5fb611;
    232   border-color: #5fb611;
    233 }
    234 .btn-u.btn-brd.btn-brd-hover:hover {
    235   background: #5fb611;
    236 }
    237 .btn-u.btn-brd.btn-u-default {
    238   border-color: #95a5a6;
    239 }
    240 .btn-u.btn-brd.btn-u-default:hover {
    241   color: #7f8c8d;
    242   border-color: #7f8c8d;
    243 }
    244 .btn-u.btn-brd.btn-u-default.btn-brd-hover:hover {
    245   background: #7f8c8d;
    246 }
    247 /*Labels*/
    248 .label {
    249   border-radius: 0;
    250 }
    251 span.label {
    252   font-size: 11px;
    253   font-weight: 400;
    254   padding: 4px 7px;
    255 }
    256 /*Font Awesome Icon Styles*/
    257 i.icon-custom {
    258   color: #555;
    259   width: 40px;
    260   height: 40px;
    261   font-size: 20px;
    262   line-height: 40px;
    263   margin-bottom: 5px;
    264   text-align: center;
    265   display: inline-block;
    266   border: solid 1px #555;
    267 }
    268 i.icon-2x {
    269   font-size: 30px;
    270 }
    271 i.icon-3x {
    272   font-size: 40px;
    273 }
    274 i.icon-4x {
    275   font-size: 50px;
    276 }
    277 /* Make Font Awesome icons fixed width */
    278 .fa-fixed [class^="fa"],
    279 .fa-fixed [class*=" fa"] {
    280   width: 1.25em;
    281   text-align: center;
    282   display: inline-block;
    283 }
    284 /*Panels (Portlets)
    285 ------------------------------------*/
    286 .panel,
    287 .panel-heading,
    288 .panel-group .panel {
    289   border-radius: 0;
    290 }
    291 .panel-heading {
    292   color: #fff;
    293   padding: 5px 15px;
    294 }
    295 /*Panel Table*/
    296 .panel .table {
    297   margin-bottom: 0;
    298 }
    299 /*Panel Script-Tutorials*/
    300 .panel-u {
    301   border-color: #00d2ff;
    302 }
    303 .panel-u > .panel-heading {
    304   background: #00d2ff;
    305 }
    306 /*Panel Blue*/
    307 .panel-blue {
    308   border-color: #3498db;
    309 }
    310 .panel-blue > .panel-heading {
    311   background: #3498db;
    312 }
    313 /*Panel Red*/
    314 .panel-red {
    315   border-color: #e74c3c;
    316 }
    317 .panel-red > .panel-heading {
    318   background: #e74c3c;
    319 }
    320 /*Panel Green*/
    321 .panel-green {
    322   border-color: #2ecc71;
    323 }
    324 .panel-green > .panel-heading {
    325   background: #2ecc71;
    326 }
    327 /*Panel Sea*/
    328 .panel-sea {
    329   border-color: #1abc9c;
    330 }
    331 .panel-sea > .panel-heading {
    332   background: #1abc9c;
    333 }
    334 /*Panel Orange*/
    335 .panel-orange {
    336   border-color: #e67e22;
    337 }
    338 .panel-orange > .panel-heading {
    339   background: #e67e22;
    340 }
    341 /*Panel Grey*/
    342 .panel-grey {
    343   border-color: #95a5a6;
    344 }
    345 .panel-grey > .panel-heading {
    346   background: #95a5a6;
    347 }
    348 /*Panel Brown*/
    349 .panel-brown {
    350   border-color: #9c8061;
    351 }
    352 .panel-brown > .panel-heading {
    353   background: #9c8061;
    354 }
    355 /*Panel Dark Blue*/
    356 .panel-dark-blue {
    357   border-color: #4765a0;
    358 }
    359 .panel-dark-blue > .panel-heading {
    360   background: #4765a0;
    361 }
    362 /*Panel Light Green*/
    363 .panel-light-green {
    364   border-color: #79d5b3;
    365 }
    366 .panel-light-green > .panel-heading {
    367   background: #79d5b3;
    368 }
    369 /*Panel Default Dark*/
    370 .panel-default-dark {
    371   border-color: #585f69;
    372 }
    373 .panel-default-dark > .panel-heading {
    374   background: #585f69;
    375 }

    ii. style.css
    copy and paste the following code in style.css

    01 /*
    02 Script-Tutorials - Responsive Bootstrap Template
    03  * Description: Bootstrap form tutorials
    04  * Author: Okeagu Godwin@script-tutorials
    05  * Website: https://www.script-tutorials.com
    06 */
    07 /*Import Global Compulsory CSS Files*/
    08 @import url(app.css);
    09 * {
    10   border-radius: 0;
    11 }
    12 body {
    13  color: #333;
    14  font-size: 13px;
    15  line-height: 1.6;
    16 }
    17 p,
    18 li,
    19 li a,
    20 label {
    21  color: #555;
    22 }
    23 a {
    24  color: #00d2ff;
    25  text-decoration: none;
    26 }
    27 a,
    28 a:focus,
    29 a:hover,
    30 a:active,
    31 button,
    32 button:hover {
    33   outline: 0 !important;
    34 }
    35 a:focus {
    36 text-decoration: none;
    37 }
    38 a:hover {
    39  color: #00d2ff;
    40  text-decoration: underline;
    41 }
    42 /*Hiding arrows for select field in IE*/
    43 select::-ms-expand {
    44   display: none;
    45 }
  3. Copy the downloaded unzipped bootstrap file into the directly called ‘forms‘

Now lets start the real bootstrapping

Firstly we ought to know that bootstrap have three standard form interface or layout namely

  1. Basic form interface
  2. Horizontal form interface
  3. Inline form interface

Create three different files in the folder ‘forms’ and name them accordingly in respect to the standard bootstrap form interface listed above

copy and paste the following basic html structure snippet of code in each

01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04   <title>Common Form Components  | Script-Tutorials - Responsive Website Template</title>
05   <!-- Meta -->
06   <meta charset="utf-8">
07   <meta name="viewport" content="width=device-width, initial-scale=1.0">
08   <meta name="description" content="script-tutorials on bootstrap forms">
09   <meta name="author" content="Okeagu Godwin">
10   <!-- Favicon -->
11   <link rel="shortcut icon" href="favicon.ico">
12   <!-- Fonts for Web-->
13   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:600,400,300&amp;subset=cyrillic,latin">
14   <!-- CSS BOOTSTRAP - Compulsory -->
15   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
16     <!-- custom necessary css file -->
17   <link rel="stylesheet" href="assets/style.css">
18   <!--  Implementing font icon css files-->
19   <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
20 </head>
21 <body>
22   <div class="wrapper">
23 <div class="col-md-9">
24 <!--form content  begins--->
25 content goes here...
26 <!--- form content ends --->
27     </div>
28   </div><!--/End Wrapepr-->
29   <!-- JS BOOTSTRAP - Compulsory -->
30   <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
31 </body>
32 </html>

Observations:

  1. 1 <!-- CSS BOOTSTRAP - Compulsory -->
    2 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  2. 1 <!-- custom necessary css file -->
    2 <link rel="stylesheet" href="assets/style.css">
  3. div class="wrapper"
  4. div class="col-md-9"

The bootstrap css file was linked to the html just like description in the preceding list above numbered 1.
While a custom stylesheet file was also link in order to add more aesthetics to the form.
The first div class was defined wrapper for consistency among web-designers it was to style in the bootstrap to fit any screen and house all other site content in the body tag <body> --- </body>
The second div class was defined col-md-9 to create / invoke already style responsive bootstrap column in the wrapper that will house the form content specifically.

Note
Copy and paste the codes of the standard bootstrap standard form interface in between the comment above in the basic html structure snippet of code give above

1 <!—form content  begins--->
2 Code goes here….
3 <!--- form content ends --->

Basic Bootstrap form interface

Notice the form class="margin-bottom-40" or the class might either remain undefined

Basic Bootstrap form Html code

01 <!-- Basic Form -->
02 <div class="panel panel-blue margin-bottom-40">
03   <div class="panel-heading">
04     <h3 class="panel-title"><i class="fa fa-tasks"></i> Basic Form</h3>
05   </div>
06   <div class="panel-body">
07     <form class="margin-bottom-40" role="form">
08       <div class="form-group">
09         <label for="exampleInputEmail1">Email address</label>
10         <input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
11       </div>
12       <div class="form-group">
13         <label for="exampleInputPassword1">Password</label>
14         <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
15       </div>
16       <div class="checkbox">
17         <label>
18           <input type="checkbox"> Check me out
19         </label>
20       </div>
21       <button type="submit" class="btn-u btn-u-blue">Submit</button>
22     </form>
23   </div>
24 </div>
25 <!-- End Basic Form -->

Bootstrap Horizontal form interface

Notice: form class="form-horizontal" the form class name is defined horizontally so the form take a horizontal form interface
Bootstrap Forms
Html code Bootstrap Horizontal form

01 <!-- Horizontal Form -->
02 <div class="panel panel-green margin-bottom-40">
03   <div class="panel-heading">
04     <h3 class="panel-title"><i class="fa fa-tasks"></i> Horizontal Form</h3>
05   </div>
06   <div class="panel-body">
07     <form class="form-horizontal" role="form">
08       <div class="form-group">
09         <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
10         <div class="col-lg-10">
11           <input class="form-control" id="inputEmail1" placeholder="Email" type="email">
12         </div>
13       </div>
14       <div class="form-group">
15         <label for="inputPassword1" class="col-lg-2 control-label">Password</label>
16         <div class="col-lg-10">
17           <input class="form-control" id="inputPassword1" placeholder="Password" type="password">
18         </div>
19       </div>
20       <div class="form-group">
21         <div class="col-lg-offset-2 col-lg-10">
22           <div class="checkbox">
23             <label>
24               <input type="checkbox"> Remember me
25             </label>
26           </div>
27         </div>
28       </div>
29       <div class="form-group">
30         <div class="col-lg-offset-2 col-lg-10">
31           <button type="submit" class="btn-u btn-u-green">Sign in</button>
32         </div>
33       </div>
34     </form>
35   </div>
36 </div>
37 <!-- End Horizontal Form -->

Bootstrap inline form interface

Notice that the form class="form-inline" so the form take the inline interface layout

Html code for Bootstrap inline form

01 <!-- Inline Form -->
02 <div class="panel panel-grey margin-bottom-40">
03   <div class="panel-heading">
04     <h3 class="panel-title"><i class="fa fa-tasks"></i> Inline Form</h3>
05   </div>
06   <div class="panel-body">
07     <form class="form-inline" role="form">
08       <div class="form-group">
09         <label class="sr-only" for="exampleInputEmail2">Email address</label>
10         <input class="form-control" id="exampleInputEmail2" placeholder="Enter email" type="email">
11       </div>
12       <div class="form-group">
13         <label class="sr-only" for="exampleInputPassword2">Password</label>
14         <input class="form-control" id="exampleInputPassword2" placeholder="Password" type="password">
15       </div>
16       <div class="checkbox">
17         <label>
18           <input type="checkbox"> Remember me
19         </label>
20       </div>
21       <button type="submit" class="btn-u btn-u-default">Sign in</button>
22     </form>
23   </div>
24 </div>
25 <!-- End Inline Form -->

[sociallocker]

download in package

[/sociallocker]