1. User Interface Design and Usability Bootstrap
Korab Zhuja, MSc
Cacttus Education

2. What is Bootstrap
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery;
Current version is 4 (beta version);

3. What is Bootstrap Layout Content Components Containers and Grid System
Paragraphs, Headers, Figures, Code, Tables, Lead Text, etc.
Components
Alerts, Buttons, Forms, Progress, Paginations, Tooltips, Dropdowns, Menus, etc.

4. Bootstrap CDN
CDN (Content Delivery Network ) To include bootstrap into your project, to have to download or get from CDN both CSS and JS libraries.
CDN stands for Content Delivery Network;
Bootstrap Homepage:

5. Bootstrap Container
Containers are the most basic layout element in Bootstrap and are required when using our default grid system.
Containers provide a means to center and horizontally pad your site’s contents.
Use .container for a responsive pixel width or .container-fluid for width 100% across all viewport and device sizes.

6. Bootstrap Grid System
Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Bootstrap's grid system allows up to 12 columns across the page.

7. Bootstrap Grid System
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them.
All the content in your columns is visually aligned down the left side.

8. Bootstrap Grid System
An example of how rows and columns works.

9. Bootstrap Images
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
To have an image thumbnails you can use .img- thumbnail to give an image a rounded 1px border appearance.

10. Bootstrap Figures
Anytime you need to display a piece of content— like an image with an optional caption, consider using a <figure>.
Use the included .figure, .figure-img and .figure- caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.

11. Bootstrap Alerts
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes.
<div class="alert alert-success" role="alert">
Kjo faqe është e ndërtuar në platformën Bootstrap.
</div>

12. Bootstrap Buttons
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<button type="button" class="btn btn-success">Konfirmo</button>
<button type="button" class="btn btn-secondary">Anulo</button>

13. www.getbootstrap.com/docs/4.0/getting- started/introduction/
More from Bootstrap
Bootstrap has a great documentation, please read and practice.
started/introduction/

14. Class Practice
Building a web page with Bootstrap;

15. ASK
You are encouraged to ask always anything related to course materials and projects.