What is Twitter Bootstrap?
You need to download bootstrap.zip folder from the official website. Before downloading, the bootstrap makes sure that code editor is install on your computer. (we recommend you for windows user Sublime text- 2 and for Linux user they can use Atom).
The file structure of bootstrap is the most basic form of Bootstrap: compiled files for easy usage in any web project. bootstrap provide compiled CSS and JS files , as well as they offer you compiled and minified CSS and JS (bootstrap.min.*).
- CSS − Bootstrap fits with the specialty of global CSS settings, basic HTML components styled and improved with extensible classes, and an advanced grid system.
- Components − Bootstrap introduces over a dozen reusable sections built to display icons, drop-downs, navigations, alerts, popovers, and much more.
- Customize − You can customize Bootstrap’s components, some variables, and jQuery plugins to get your very own version.
Steps to use the bootstrap
- Create a basic HTML page.
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport"content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Hello, world! </h1> <script src="http://code.jquery.com/jquery.js"> </script> </body> </html>
<!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" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- After including the bootstrap files you can use the CSS classes in your HTML code.
<div class="form-group has-success"> <label class="col-form-label" for="inputSuccess1"> Input with success </label>
- after this, you can start development of your web-site or application using bootstrap.