BOOTSTRAP FIVE

BOOTSTRAP 5 GET STARTED Bootstrap is one of the world's most popular front-end development component libraries, open-Source, it was originally developed by Mark Otto and Jacob Thornton at Twitter. Mobile-First: allows us to develop responsive websites, which automatically adapt to the device used. Bootstrap is a free front-end framework for easier and faster web development, includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many more, as well as plug-ins Optional JavaScript. Bootstrap also gives you the ability to easily create responsive designs. NOTE: When we talk about Bootstrap components, I [...]

CONTAINER BOOTSTRAP 5 You learned from the previous post that Bootstrap requires a containment element to wrap the site's content. The containers are used to fill the content within them and there are two classes available: The .container class provides a fixed-width responsive container The .container-fluid class provides a full-width container, which spans the full width of the window. CONTAINER FIXED Use the .container class to create a fixed-width responsive container. Note that its width (max-width) will change on different screen sizes: FLUID CONTAINER Use the .container-fluid class to create a full-width container, which will [...]

THE BOOTSTRAP GRID SYSTEM The Bootstrap Grid System is the Grid System used for the creation of responsive and mobile-first layouts. It uses a series of containers, rows and 12 columns for the arrangement and alignment of contents. Written with FlexBox, it comes with tons of classes ready to be used on our web pages. The grid system is responsive and the columns will automatically rearrange according to the screen size. Make sure the sum is 12 or less (you don't need to use all 12 available columns). BOOTSTRAP GRID CLASSES The Bootstrap 5 grid system has [...]

BOOTSTRAP COMPONENTS BUTTON Bootstrap 5 provides several styles of buttons. Button classes can be used on elements: <a>, <button> or <input>.  BUTTON OUTLINE Bootstrap 5 also provides eight buttons with borders. Move your mouse over them to see an additional "hover" effect. BUTTON SIZE Use the .btn-lg class for large buttons or the .btn-sm class for small buttons: <button type="button" class="btn btn-primary btn-lg">Large <button type="button" class="btn btn-primary">Default <button type="button" class="btn btn-primary btn-sm">Small BLOCK LEVEL BUTTON To create a block-level button that spans the full width of the parent element, use the .d-grid "helper" class on the parent element. ACTIVE/DISABLED [...]

MODAL WINDOWS The Modal component is a pop-up dialog box that appears at the top of the current page. The following example shows how to create a basic modal: ADD AN ANIMATION Use the .fade class to add a fade effect when opening and closing the modal window: <div class="modal fade"> MODAL SIZE Modify the modal size by adding the .modal-sm class for small modals (max width 300px), .modal-lg class for large modals (max 800px width) or .modal-xl for extra large modals (max - width 1140px). The default is 500px maximum width. Add the size class to [...]

NAVBAR A navigation bar is a navigation header normally placed at the top of the page: With Bootstrap, a navigation bar can stretch or collapse, depending on the size of the screen. A standard navigation bar with the class .navbar is created, followed by a responsive compression class: .navbar-expand-xxl | xl | lg | md | sm (stacks the navigation bar vertically on xxlarge, extra large, large screens , medium or small). To add links within the navigation bar, use a <ul> element (or a <div>) with class = "navbar-nav". Then add <li> elements with a [...]

NAV MENUS If you want to create a simple horizontal menu, add the .nav class to an <ul> element, followed by .nav-item for each <li> and add the .nav-link class to their links: ESEMPIO DI CODICE Add the .justify-content-center class to center the nav and the .justify-content-end class to right align the nav. <!-- Centered nav --> <ul class="nav justify-content-center"> <!-- Right-aligned nav --> <ul class="nav justify-content-end"> VERTICAL NAV Add the .flex-column class to create a vertical nav: CODE TO CREATE A VERTICAL NAV TABS Turn the navigation menu into navigation tabs with the .nav-tabs class. Add the .active class to the active/current link. The [...]