Bootstrap is the most popular front-end framework for faster and easier web development. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins. Bootstrap also gives you the ability to easily create responsive designs that automatically adjust themselves to look good on all devices, from small phones to large desktops.
Procedures
Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype so you need to include the HTML5 doctype at the beginning of the page along with the correct character set.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head>
Bootstrap is designed to be responsive to mobile devices. To ensure proper rendering and touch zooming, add the following tag inside the HTML head element.
<meta name="viewport" content="width=device-width, initial-scale=1">
Containers
Bootstrap has it’s own wrapper to wrap site contents.
The container class provides a responsive fixed width container
The container-fluid class provides a full width container spanning the entire width of the viewport.
You cannot put a container inside another container.
Grid System
Bootstrap’s grid system divides the total width of the page into 12 equal columns. You can group the columns together to create wider columns or use them individually. This grid system is responsive and the columns will re-arrange automatically depending upon the screen size.
| col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 | col 1 |
| col 2 | col 2 | col 2 | col 2 | col 2 | col 2 | ||||||
| col 3 | col 3 | col 3 | col 3 | ||||||||
| col 4 | col 4 | col 4 | |||||||||
| col 6 | col 6 | ||||||||||
| col 12 | |||||||||||
Grid Classes
The Bootstrap grid system has four classes
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Basic Structure
1. Create a wrapper.
2. Create a row to nullify the padding property of the wrapper.
3. Create a div of xs or sm or md or lg as needed. Personally, I prefer md as it works best for all devices.
4. The total number of cols value inside each row must add up to 12.
<div class="container-fluid"> <div class="row"> <div class="col-*-*"> </div> </div> <div class="row"> <div class="col-md-3"> </div> <div class="col-md-7"> </div> <div class="col-md-2"> </div> </div> <div class="row">...</div> </div>
Free Certification
Academy Europe presents high-quality formal diplomas, certificates and e-certificates which are formal proof and recognition of accredited online courses. It shows all student’s abilities to learn and achieve high results and is very useful to promote personal career including with CVs, job applications and self improvements.
How can you get your certificate at Academy Europe?
- You must click “complete” link at the end of every lesson of your course after you finish them.
- When you finish all lessons of course, the “finish course” link is going to be active at the end of last lesson.
- When you click the “finish course” link, you will finish your course on Academy Europe officially. Then, “certificate” page of you completed course will be automatically active.
- You can see and download your certificate online after you click on your “certificate” link.
Samples: Horizantal Diploma – Horizantal Certificate – Vertical E-Certificate
Audience
This tutorial has been intended for the users willing to take the human computer interactions as a next level of study in their career.
This course by Academy Europe aims at imparting quality education and training to students.
Academy Europe is dedicated to its students, their specific learning requirements, and their overall learning success.
This course is directed toward a student-centered, independent study, asynchronous learning approach.
After completing this course on Academy Europe, students will get self improvement and promotion in their careers.
This course is based on at least two learning skills which are provided to the users through audio & visuals, videos, verbal presentations and articles, all of which are asynchronized with distance education approach.
Prerequisites
The basic knowledge of Graphical User Interface, Object Oriented Programming and software tools and menus are the only prerequisite for this tutorial.
Before you start proceeding with this course on Academy Europe, we are assuming that you have a good aptitude and can think logically. You should want to try something different.
Ideal candidates for the course would typically possess:
– Discipline and attentiveness
– Ability to conduct research
– Ability to perform tasks with speed, efficiency, and accuracy
– Analytical judgment
– Patience to interpret technical/scientific data
– A willingness to learn, roll up your sleeves and work toward your dream!
– A computer, tablet or smartphone and an internet connection
– Basic computer skills