PHP MySQL Crash Course with HTML CSS - Prayas Sapkota

Bootstrap Introduction to Bootstrap Linking Bootstrap JS & CSS Grid System Bootstrap Table, Form, Images, Bootstrap Icon / Font Awesome Navbar, Pagination Other Bootstrap Compontents TASK: Using Bootstrap & Designing basic website layout with bootstrap.

Introduction to Bootstrap Bootstrap is a powerful front-end framework for faster and easier web development ability to create responsive layout with much less efforts. It includes HTML and CSS based design templates for common user interface components like Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel and many other as well as optional JavaScript extensions. Download Bootstrap from www.getbootstrap.com

Linking Bootstrap JS & CSS If you want to download and host Bootstrap yourself, go to getbootstrap.com and download bootstrap files. If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs s"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></s cript> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

Grid System… The Bootstrap grid system has four classes: xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops) <div class="container"> <div class="row"> <div class="col-md-12"></div> </div> <div class="col-md-4"></div>

Bootstrap Elements Table Form Images Bootstrap Icon / Font Awesome Navbar Pagination Breadcrumbs Buttons