Skip to main content

Bootstrap-3: Part-1: Getting started with Bootstrap3

Bootstrap is an open source framework for building awesome web-sites. It is collection of "javascript, css & images". Bootstrap also provides responsive design to adapt your site to mobile devices.

Here we'll see from where to get bootstrap and how to use it in our page.

1. Get the bootstrap
   go to "http://getbootstrap.com/" and click the "Download Bootstrap" button

   By default it'll start downloading latest version (bootstrap 3.0 as of 4Jan2014)
   If you want to download other version of bootstrap look into the footer of this opened-website.



2.  Unzip downloaded file
 Copy the downloaded "zip" file in your web development file location
  e.g. "C:\Bootstrap\Bootstrap-3" and "unzip" this file.
 


  After unzipping it you'll be able to see "dist" file, inside this you'll
  find 3 different folder "css", "js", "fonts" folders at the same folder level

    
3. Now let's create login page using these files and test it.
   3.1. Create a folder e.g. "C:\Bootstrap\Bootstrap-3\TestApplication\"
   3.2. Copy all the files from "C:\Bootstrap\Bootstrap-3\dist" location
       to "C:\Bootstrap\Bootstrap-3\TestApplication\" location.

      Here one thing should keep in mind that these 3 files "css", "js", "font" should be at the same level.

  3.3. Let's create an html page "loginPage.html" inside "C:\Bootstrap\Bootstrap-3\TestApplication\" folder. And copy & page the following code inside this html page as it is



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test application - Login Page</title>
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

 </head>
<body>
    <div class="container">
        <div class="row">
            <form role="form" method="POST" class="form form-horizontal">

                 <div class="col-sm-8 pull-left">
                    <h1 class="page-header">LOGIN <small>Enter credentials for Test Application</small></h1>
                  
                    <div class="form-group">
                        <label for="inputEmail" class="control-label col-md-2">Your Email</label>
                        <div class=" col-md-6">
                            <input type="text" id="inputEmail" class="form-control" placeholder="e.g. Your Email" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword" class="control-label col-md-2">
                            Password
                        </label>
                        <div class="col-md-6">
                            <input type="password" id="inputPassword" class="form-control" placeholder="enter your password" value="" />
                        </div>
                    </div>

                     <div class="form-group">
                        <label class="checkbox col-md-8 col-md-offset-2">
                        <label class="btn checkbox btn-default"><input type="checkbox">Remember me</label>
                            </label>
                    </div>
                    <div class="form-group">
                        <div class="col-lg-8 col-md-offset-2">
                            <input type="submit" value="Submit" class="btn btn-success" />
                        </div>
                    </div>
                </div>

             </form>
        </div>
    </div>
    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.js"></script>
 </body>
</html>


   3.4. Save this file and open it in a browser.
   You'll be able to view your page like this.



In coming articles we'll try to explore bootstrap3s frequently used features one by one.
Next article we'll see the Grid system in bootstrap3 (What are grid systems, how to use grid system for different devices {desktop, mobile e.t.c.} and some examples.)
  

Labels:

Comments

Post a Comment

Popular posts from this blog

EFCore - Collate function

Search in SQL server query is generally case insensitive (by default or based on database level collation). Suppose we have an employees table with a row having first-name column value as "My-First-Name", so if we want to do the case-sensitive search we have to explicitly use the related collate: In EF 5 (currently in Release Candidate version [RC.2.20475.6]) Collate function got introduced which helps us to use our specific collation based search.  C# with EF5 code sample: var employeeCaseSensitiveSearch = _dbContext.Employees .Where(x => EF.Functions.Collate(x.FirstName, "Latin1_General_CS_AS") == "my-first-name") .FirstOrDefault(); A related database query will be something like this: T-SQL: Case sensitive search (use specific collation e.g.: Latin1_General_CS_AS) SELECT * FROM dbo.Employees AS e WHERE e.FirstName Collate Latin1_General_CS_AS = 'my-first-name' Some of the useful CSharp function which g...
Post a Comment
Read more

How to install Zen-coding plugin

As a web-developer, irrespective of the technologies (java, c-sharp, python, php e.t.c.…), we used to write CSS code to make our web-pages looks good if not at least we’re involved in write html codes. What if there is some tool to whom you give some instruction and that tool generates a good, well formatted html tags for you. These kind of coding is possible and known as “ Zen coding ” and there are lots of plug-in available from different vendors. We’re going to  discuss the steps to install this “zen-coding” plugin for “visual studio, eclipse, sublime-text & notepad++ in next few lines. Follow the below steps to install "zen-coding" plugin based on your editor.  Steps to install zen-coding plugin for (visual studio, eclipse, sublime-text,notepad++) -- -- For Visual Studio 1. Go to "Tools" -> "Extensions and Updates" 2. It'll open the "Extensions and Updates windows"    Select online form Left hand menu items ent...
Post a Comment
Read more

EFCore - Scaffold-DbContext how to use

EFCore versions, we don't have GUI to manage the DB-entities & dbContext like we used to have with EF6 (or EF5/4 version). With EFCore we've the Scaffold-DbContext command which helps us to create entities & DB context from our DB-objects.  Let's see how to use Scaffold-DbContext: Assume we're connecting with SQL Server so after creating a sample project you'll have to install EFCore related libraries as mentioned below.  Install entity-framework-core for SQL Server, at this time 3.1.9 is the latest stable version   Microsoft.EntityFrameworkcore   Microsoft.EntityFrameworkCore.SqlServer  To use Scaffold-DbContext, following two NuGet packages are required Microsoft.EntityFrameworkCore.Tools  Microsoft.EntityFrameworkCore.Design Let's say we've two DB tables (e.g. dbo.Employees & dbo.Users )  Now let's see how to use Scaffold-DbContext to create c-...
Post a Comment
Read more