Journey With Bootstrap: Day 1

Sanjay Singh

BootstrapJourneybasics of Bootstrap

15 Comments

Join the conversation! Your thoughts help the community grow.

Subash10y ago
Good start
Abhijit Patil11y ago
Hey Sanjay .great keep write series till develope complete responsive templates.excisted to learn bootstrap
- Sanjay Singh11y ago
  thank you !!! i'll try to make it large
ROHAN PANDEY11y ago
Nice
- Sanjay Singh11y ago
  thanks ROHAN PANDEY sir
Abhishek Jaiswal11y ago
Good work.. keep it up buddy! :)
- Sanjay Singh11y ago
  thanks Abhishek Jaiswal sir...
Madhuram Srivastava11y ago
very interesting article , keep it up and hope to your next article very soon .
- Madhuram Srivastava11y ago
  nice Sanjay singh..
- Sanjay Singh11y ago
  http://www.c-sharpcorner.com/UploadFile/2cb323/journey-with-bootstrap-day-2-grid-system
- Sanjay Singh11y ago
  thanks Madhuram Srivastava .... yes next article is going to be publish ... thanks for reading
Sahil Sharma11y ago
very nicely explained. Expecting more articles on the same especially on glyph icons
- Sanjay Singh11y ago
  yeah sure sir, i will try to do... thanks sir
Sam Hobbs11y ago
About half a century ago word processing systems began doing this type of thing. SGML was based on one of them but when SGML was used for HTML the HTML lost this type of thing.
- Sanjay Singh11y ago
  agree with you sir

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.

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

Download it from: Ggetbootstrap (All the code of Bootstrap will be on your system).
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.

<!DOCTYPE html>
<html>
…………..
………..
</html>

To ensure proper rendering and touch zooming, add the viewport meta tag to <Head>.

<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.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

First program with Bootstrap:

<!DOCTYPE html>
<html>
<head>
<title>First</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body
{
background-color:#00F;
}
h3
{
color:#CCC;
}
</style>
<meta name="viewport" content="width= device-width,initial-scale=1">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

Output

output

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.