Intro to Bootstrap
- 1. Bootstrap 4 Framework for easy and quick responsive websites
- 2. Steps to Using Bootstrap • Create or use an HTML page • Load Bootstrap via CDN (or locally) • Add jQuery and Bootstrap JavaScript • Design your page
- 3. Open gallery.html • Keep the viewport call – needed for Bootstrap <!DOCTYPE html> <html> <head> <title>Welcome to Bootstrap</title> <meta charset="utf-8"> <!--might need --> <meta name="viewport" content="width=device-width,initial-scale=1">
- 4. Load the CDN • What is a CDN? – a highly-distributed platform of servers that helps minimize delays in loading web page content by reducing the physical distance between the server and the user. – helps users around the world view the same high- quality content without slow loading times. – End goal is to reduce latency for web content delivery Definition from https://www.akamai.com/us/en/cdn/what-is-a-cdn.jsp
- 5. How does a CDN work? • CDNs store a cached version of your website content in multiple geographical locations around the world, – “points of presence” (PoPs) • These PoPs will contain their own caching servers and will be responsible for delivering that content in the user’s location.
- 6. CDN Code • Copy & paste the CDN code in the <head> before other CSS • https://getbootstrap.com – Get started
- 7. <!DOCTYPE html> <html> <head> <title>Welcome to Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head>
- 8. Link to JS files • Before the closing </body> tag
- 9. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384- q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384- UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384- JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
- 10. NavBar Basics • Creates a navigation element that is responsive by default • Automatically collapse on smaller screens • Built-in support for adding branding, color schemes, spacing, and other components
- 11. NavBar Basics • Navbars require a wrapping .navbar with .navbar- expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes. • Navbars and their contents are fluid by default. • Navbars are responsive by default, but you can easily modify them to change that. • Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
- 12. <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li> <li class="nav-item"><a class="nav-link" href="">About Us</a></li> <li class="nav-item"><a class="nav-link" href="">Products</a></li> <li class="nav-item"><a class="nav-link" href="">Gallery</a></li> <li class="nav-item"><a class="nav-link" href="">Contact Us</a></li> </ul> </nav> Responsive dark-themed navbar that collapses at the md (medium) breakpoint
- 13. Breakpoints // Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } -sm for larger mobile phones -md for tablets (≥768px); -lg for laptops (≥992px); -xl for desktops (≥1200px)
- 14. Color Schemes
- 16. Adding Hamburger Button for mobile • Add Button <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data- target="#main-navigation"> <span class="navbar-toggler-icon"></span> </button>
- 17. Adding Hamburger Button for mobile • Tell it what should be collapsed in the button <div class="collapse navbar-collapse" id="main- navigation”> <ul class="navbar-nav”> <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li> … <li class="nav-item"><a class="nav-link" href="">Contact Us</a></li> </ul> </div>
- 18. Layouts in Bootstrap • Bootstrap Grid – containers • <div class="container"> – equal space on R & L of container • <div class="container-fluid"> – full width – columns – rows
- 19. Container Examples <div class="container"> Hello! I am in a simple container. </div> <div class="container-fluid"> Hello! I am in a full-width container. </div> From https://www.freecodecamp.org/news/learn-the-bootstrap-4-grid-system-in-10-minutes-e83bfae115da/
- 21. Bootstrap Rows • Horizontal slices of the screen • Have to be inside a “container” • Only as containers for columns • To use them, you need the .row class <div class= “row”> </div>
- 22. Bootstrap Columns • Divide the screen horizontally • If you place a single column in your row, it will take up all the width. • If you add two columns, they will each take 1/2 from the width. • And so it goes for any number of columns up to 12.
- 23. Setting Column Sizes • Default – Using the .col class sets the width for the column dynamically. – Depending on the number of columns in a row • width of a column = width of the container / # of columns • Custom – Use classes to define their size – Bootstrap grid contains 12 columns by default • 3 equal columns, you can use .col-4 for each one
- 24. <div class=“row”> <div class = “col_6”> … </div> <div class = “col_6”> … </div> </div>
- 25. <div class=“row”> <div class = “col_5”> … </div> <div class = “col_7”> … </div> </div>
- 26. <div class=“row”> <div class = “col_6”> … </div> <div class = “col_7”> … </div> </div> If the sum of the cols in your row doesn’t get to 12, then they don’t fill the whole row. If the sum of the columns goes beyond 12 then it will move to the next line. The first line will only display the first elements that add up to 12 or lower.
- 27. Setting Column Breakpoints • Displaying 5 columns on mobile will make it impossible to read/view • Instead, use column breakpoints • When specifying a breakpoint for a class, you are telling the class to be active only for resolutions that are at least as big as the number that the breakpoint holds.
- 28. Bootstrap Breakpoints • .col-sm for larger mobile phones (devices with resolutions ≥ 576px); • .col-md for tablets (≥768px); • .col-lg for laptops (≥992px); • .col-xl for desktops (≥1200px)
- 29. <div class=“row”> <div class = “col-lg”> … </div> <div class = “col-lg”> … </div> </div> Devices in the large view Devices smaller than large
- 30. Combining Sizes and Breakpoints <div class=“row”> <div class = “col-lg-4”> … </div> <div class = “col-lg-3”> … </div> <div class = “col-lg-5”> … </div> </div> Smaller screens Larger screens
- 31. Combining Sizes and Breakpoints <div class=“row”> <div class = “col-sm-6 col-lg-3”> … </div> <div class = “col-sm-6 col-lg-3”> … </div> <div class = “col-sm-6 col-lg-3”> … </div> <div class = “col-sm-6 col-lg-3”> … </div> </div> Tablet screens Laptop screens
- 32. Finishing Up The Gallery <div class = "row”> <div class="col-md-4 col-sm-6”> <img src="images/balloons.jpg”> </div> … </div>