Table of Contents
Hello friends, After long time i am here with great tutorial for you. Today i am gonna share some thought with you regarding most popular front-end framework bootstrap. Yes, Bootstrap is most popular front-end framework for web-designing. In this tutorial i will learn you some benefits to use of bootstrap with example. There are many alternatives like foundation, Zimit, Html kickstart, Pure etc. But Work experience with bootstrap is always amazing. Bootstrap is most famous because of its simplicity and easily customization. Bootstrap is known as twitter bootstrap mainly made by Mark Otto and Jacob Thornton at Twitter as a framework. instagram takipรงi satฤฑn al
Benefits of Bootstrap
- Bootstrap is comes up with lots of CSS class. So you don’t need to write more css for creating and styling the functionality. It speed up your development time. It has lots of Javascript functionality that will help you to make this happen.
- You will get you site responsive without write it’s responsive code. This is a core feature of bootstrap.
- You can customize its class with your class and make more attractive class. You can extend its functionality with your own code.
- Bootstrap 2, Bootstrap 3 are working awesome. Bootstrap 4 is coming. So there is great support of bootstrap developer community. There are lots of solutions and tutorials available on the internet.
- These are main benefits of bootstrap. In now days there are millions site converting on the bootstrap.
How to setup bootstrap for your project?
It is very easy to setup bootstrap for your web-application. Bootstrap comes up with many great functionality. So if you are planning to use bootstrap for your new project then follow the below steps. It is not a rocket science. Anyone can setup bootstrap with their web-apps.
- Go to Bootstrap.com and download “Compiled and minified CSS, JavaScript, and fonts” package. Extract this package.
- You will find out three folders inside it. The name of folders are css, fonts and js.
- In your project’s css folder copy bootstrap.min.css and bootstrap-theme.min.css files.
- In your project’s js folder copy bootstrap.min.js file.
- Copy “bootstrap/fonts/*” into “yourproject/fonts/*“.
Setup path of bootstrap file in your project
Add bootstrap.min.css and bootstrap.min.js files on evry pages you want to use bootstrap in your project. Here is a demo how to add bootstrap files in your page. Suppose, you have index.php file in your project and you want to add bootstrap functionality in it. Then add files like this way.
index.html
<!DOCTYPE html> <html> <head> <title>Your title</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-themes.min.css"> <link rel="stylesheet" type="text/css" href="css/your-style.css"> </head> <body> </body> <script type="text/javascript" src="js/bootstrap.min.js"></script> </html>Congratulations. You just added bootstrap libraries in your project. Now probably, you have a questions like how to use bootstrap functionality in my page. Its very simple. See the below code.
How to use bootstrap functionality ?
Suppose you are making a simple html table in your web-page. You can use bootstrap class as below
<!DOCTYPE html> <html> <head> <title>Your title</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-themes.min.css"> <link rel="stylesheet" type="text/css" href="css/your-style.css"> </head> <body> <div class="container"> <!-- Bootstrap container --> <div class="row"> <!-- Boostrap row --> <div class="col-md-12"> <!-- Bootstrap column --> <table class="table table-responsive"> <!-- Bootstrap table class for responsive table --> <thead> <th>No.</th> <th>Name</th> <th>Email</th> </thead> <tbody> <td>1</td> <td>Dummyname1</td> <td>[email protected]</td> </tbody> </table> </div> </div> </div> </body> <script type="text/javascript" src="js/bootstrap.min.js"></script> </html>In the above example, you will find out that we use bootstrap’s container class for getting same with from both side(Left and Right). Then we use “row” class, after it “col-md-12” class. Here “col-md-12” is a column. Bootstrap working on grid system. It only understand 12 grids. So you have to manage it with your application. We will discuss about grid system in the next tutorial. There is also “table-responsive” class from bootstrap for our table.
Same way you can make other things using bootstrap class like form, table, model etc. You can find out more documentation for bootstrap on it’s official source. There are many site on the internet provide bootstrap tutorial but i recommend you to follow bootstrap’s official site.
๐ Final words ๐
I hope that you may like this tutorial. If you like this tutorial then share it with your friend. If you have any question regarding bootstrap then let me know. I will surely answer you. You can mail me your questions on the [email protected] email address. Thanks for reading this tutorial. Take a visit of other tutorials on our site. They are also awesome.
