User Interface Design and Usability Bootstrap Korab Zhuja, MSc Cacttus Education korab@zhuja.com 049 720 770

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);

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.

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: www.getbootstrap.com

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.

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.

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.

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

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.

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.

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>

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>

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

Class Practice Building a web page with Bootstrap;

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