- Instructor: Andrea Neumann
- Lectures: 22
- Students: 1266
- Duration: 10 weeks
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">
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.
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|
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.
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>
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
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.
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
Bootstrap User Interface
Bootstrap Tabs And Panels
Bootstrap Js Add Ons
Bootstrap 4 Introduction
Bootstrap 4 Layout Utilities
Bootstrap 4 Utilities A-I
Bootstrap 4 Typography
Bootstrap 4 Images
Bootstrap 4 Tables
Bootstrap 4 Cards
Bootstrap 4 User Interfaces