Getting started with twitter bootstrap
Bootstrap can be useful for the following reasons:
Time savings: Bootstrap features many things that are pre-built, and simply need to be called upon when writing code. This saves a considerable amount of time, and can greatly reduce the time needed to code a website.
Built with responsive web design in mind: Bootstrap allows web developers to not be concerned about creating things that will scale with the size of their screen, as Bootstrap uses a mobile-first, responsive design that allows them to build things that will work on any screen size.
Simplifies design process: Bootstrap comes prebuilt with elements that have good design practices. This can be useful for those whose web design skills are not that great, or for those who view design as a tedious task, as many of Bootstrap classes are aesthetically pleasing and great to look at.
Download Bootstrap directly or clone, etc. from the GitHub repository
Download your customized version of Bootstrap from official docs
Install with Bower: bower install bootstrap
Install with npm: npm install bootstrap
Install with composer: composer require twbs/bootstrap
You can utilize your installed Bootstrap files from the above section, or reference a CDN provided by the makers of Bootstrap (links taken from Getting Started with Bootstrap):
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
Responsive meta tag
Bootstrap is developed mobile-first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.
When to use Bootstrap
One of the fundamental concepts of Bootstrap is the grid framework. By applying classes to HTML elements, it is possible to create intricate layouts using a basic grid of twelve columns. For example, a four-column layout might adapt to two columns on tablet devices and one column on mobile devices. The grid uses media queries, a CSS method for targeting specific screen sizes, to achieve this.
Bootstrap performs particularly well if:
Custom design is not a top priority
You are more comfortable editing HTML and adding classes than you are creating custom CSS
You are comfortable using a framework that will have many visual similarities to many other websites
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website