Bootstrap
Bootstrap is a collection/framework of different tools having the properties/attributes:
- A free collection of tools for creating websites and web applications
- Contains HTML and CSS-based design templates for text, forms, buttons, navigation and other components
- Contains optional JavaScript extensions
- Is open source
- Available on GitHub
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.
Benefits of the usage of Bootstrap?
- Mobile-first approach: Since Bootstrap 3, the framework consists of mobile-first styles throughout the entire library
- Browser support: Bootstrap is supported by all popular browsers
- Responsive web design: Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobile phones
- Easy to get started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap
Bootstrap include:
- Scaffolding: Contains layout, grid system, fluid grid system, and responsive design
- Base CSS: Contains classes for typography, tables, forms, buttons, images, and more
- Components: Contains reusable components: icons, dropdowns, navbars, breadcrumbs, alerts, and more
- JavaScript Plugins: Contains over a dozen custom jQuery plugins. You can include them all, or one by one
- Customizable Components: Customize Bootstrap's components, LESS variables, and jQuery plugins to create your own version
Base assumptions
Keep in mind that Bootstrap 3 is mobile-first!
The code for Bootstrap starts by targeting smaller screens like mobile devices and tablets, and then "expands" components and grids for larger screens.
Grid Options
The following table summarizes how the Bootstrap grid system works across multiple devices:
Extra small devices Phones (<576px) |
Small devices Tablets (>=576px) |
Medium devices Desktops (>=768px) |
Large devices Desktops (>=1200px) | |
---|---|---|---|---|
Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
Number of columns | 12 | 12 | 12 | 12 |
Column width | Auto | ~62px | ~81px | ~97px |
Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
Nestable | Yes | Yes | Yes | Yes |
Offsets | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes |
For Bootstrap 4.0 please refer to https://getbootstrap.com/docs/4.0/layout/grid
Usage
Two methods for the usage of Bootstrap:
- Download Bootstrap from the Bootstrap Website http://getbootstrap.com.
- Include Bootstrap from a Content Delivery Network (CDN), like MaxCDN
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <!-- Optional: Include the jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Optional: Incorporate the Bootstrap JavaScript plugins --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Bootstrap Laravel
Assuming:
- Terminal has been opened
- Located in the root of the Laravel application.
- npm [1] has been installed.
The good location contains the file 'composer.son'.
To add Bootstrap to Laravel add line 7 to composer.json file located in the root of the Laravel application:
1. { 2. "name": "laravel/laravel", 3. "description": "The Laravel Framework.", 4. "keywords": ["framework", "laravel"], 5. "require": { 6. "laravel/framework": "4.0.*", 7. "twitter/bootstrap": "*" 8. },
and run:
$ composer update
The result will be that there is a directory twitter located under the vendor directory.
$ cd vendor/twitter/bootstrap/ $ npm install ...
You now have the required bootstrap located in: vendor/twitter/bootstrap/dist/css. Just copy them to 'public /packages' or run the artisan command (from the root dire of the Laravel installation):
$ php artisan asset:publish --path="vendor/twitter/bootstrap/dist/css" bootstrap/css
See also
Reference
- ↑ Nodejs, npm (https://npmjs.org) installation.