Post
Ask Question

Journey With Bootstrap: Day 1

First, I wish you all a very happy and prosperous new year, may this year bring much success and fun in your life.

This year, I began to learn a new framework called “Bootstrap” that let us build responsive websites quickly.

So let's start.

What Bootstrap is: Bootstrap is a HTML, CSS and JavaScript framework to develop responsive and mobile first applications on the web. Here we see two terms, the first one is responsive. That means the website will respond to various screen sizes by automatically adjusting its layout to look good.

Example: Our C# Corner website is responsive, you can see its different look and feel on different devices such as PCs, tablets, and smartphones.

The second term is mobile first that means the website is built to scale nicely to varying screen sizes.Bootstrap

History of Bootstrap: Bootstrap began as an internal project at Twitter hence sometimes Bootstrap is known as “Twitter Bootstrap”. Two guys named Mark Otto and Jacob Thornton got management approval to open source it.

Get bootstrap
  1. Download it from: Ggetbootstrap (All the code of Bootstrap will be on your system).
  2. Include Bootstrap from the Content Delivery Network (CDN) (all the Bootstrap code is online and we only need a link for it).

Language Require to start Bootstrap: Knowledge of HTML, CSS and JavaScript.

Now Start With Bootstrap: The coding starts with <!DOCTYPE html>, it shows the version of HTML that we use.

  1. <!DOCTYPE html>  
  2. <html>  
  3. …………..  
  4. ………..  
  5. </html>  
To ensure proper rendering and touch zooming, add the viewport meta tag to <Head>.
  1. <meta name="viewport" content="width=device-width, initial-scale=1">  
You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.
  1. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
First program with Bootstrap:
  1. <!DOCTYPE html>  
  2. <html>  
  3.    <head>  
  4.       <title>First</title>  
  5.          <link rel="stylesheet" href="css/bootstrap.min.css">  
  6.          <style>  
  7.             body  
  8.             {  
  9.                background-color:#00F;  
  10.             }  
  11.             h3  
  12.             {  
  13.                color:#CCC;  
  14.             }  
  15.          </style>  
  16.          <meta name="viewport" content="width= device-width,initial-scale=1">  
  17.          <script src="js/bootstrap.min.js"></script>  
  18.     </head>  
  19. <body>  
  20.    <h3>HAPPY NEW YEAR 2015 We hope you are blessed with delight, fulfillment, and peace in this New Year. May the love and warmth carry you into the New Year with a joyful spirit and hopeful heart.On New Year's Day and every day, we wish you joy and fulfillment. May it brings health, prosperity and happiness to all.</h3>  
  21.    </body>  
  22. </html>  
Output

output

message

Here you can see no loss of message after changing the size of the window. We can customize this using CSS that we will learn in a future part.

Thanks for reading. I hope you enjoy Bootstrap.

 


Similar Articles