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

EFCore - Parallel db call on same dbContext

Practically there are multiple instances when we want to do parallel DB call which will save us some time. Like if we want to get a few employees details as well as users detail and if both entities are independent of each other better to go with a parallel call to fetch the details.  With the growing ORM usage and enhanced & optimized framework of like EFCore, in most of the application (related to C# development), we generally prefer to use EFCore. With EFCore if we try to use the same DB context to do parallel db call we are getting an error (... different thread using the same DbContext....). Because dbContext call is not thread-safe Parallel DB call on the same dbContext:  Code snipped: which will throw an error private void DbCallWithParallelCallOnSameDbContext() { try { var employeesTask = _dbContext.Employees.ToListAsync(); var usersTask = _dbContext.Users.ToListAsync(); ...
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