Hello guys! welcome to a brand new tutorial series on Bootstrap. In this tutorial post, we are going to be giving a brief introduction to Bootstrap. We hope you find this tutorial on Bootstrap useful.
Bootstrap is the most popular frontend web development framework in recent time, it is a powerful mobile first frontend framework for faster and easier web development and designs, it uses HTML, CSS and JavaScript. This tutorial series is going to teach you the basics of Bootstrap framework using which you can create web projects with ease.
Bootstrap is the most popular frontend web development framework in recent time, it is a powerful mobile first frontend framework for faster and easier web development and designs, it uses HTML, CSS and JavaScript. This tutorial series is going to teach you the basics of Bootstrap framework using which you can create web projects with ease.
History
Bootstrap was developed by Mark Otto and Jacob Thornton. It was released as an open source product in August 2011 on GitHub.
Why Learn Bootstrap?
- Mobile first approach - Bootstrap 3 framework, is made up of mobile first styles throughout the entire library.
- Browser Support - Bootstrap is supported by all popular web browsers.
- Responsive design - Bootstrap's responsive CSS, adjusts to Desktops, Tablets, and Mobiles.
- Easy to get started - With just the knowledge of HTML and CSS, anyone can get started with Bootstrap. Also the Bootstrap official site has a good documentation.
- It contains beautiful and functional built-in components which are easy to customize.
- It provides web based customization.
- It provides a clean and uniform solution for building an interface for developers.
- It is an open source.
Hello World using Bootstrap
The following below is a small conventional Bootstrap Hello World program -
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> <!-- Bootstrap --> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src = "https://code.jquery.com/jquery.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src = "js/bootstrap.min.js"></script> </body> </html>
What Bootstrap Package Includes?
- Scaffolding - Bootstrap provides a basic structure with Grid System, link styles, and background.
- CSS - Bootstrap comes with the feature of global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
- Components - Bootstrap has over a dozen reusable components built to provide navigation, iconography, dropdowns, alert, pop-overs, and much more.
- JavaScript Plugins - Bootstrap has over a dozen custom jQuery plugins. You can easily include them all, or one by one.
- Customization - You can customize Bootstrap's components, less variables, and jQuery plugins to get your very own version.
Audience
This tutorial has been prepared for anyone who has knowledge of HTML and CSS, and has an urge to develop websites.
Prerequisites
Before proceeding with this tutorial, we are assuming that you are already aware of the basics of HTML and CSS. But if you are not aware of these concepts, then we suggest you to go through our tutorial on HTML and CSS.
Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about Bootstrap Environment Setup.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.