Table of Contents for
Bootstrap 4 – Responsive Web Design

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Bootstrap 4 – Responsive Web Design by Jason Marah Published by Packt Publishing, 2017
  1. Cover
  2. Table of Contents
  3. Bootstrap 4 – Responsive Web Design
  4. Bootstrap 4 – Responsive Web Design
  5. Credits
  6. Preface
  7. What you need for this learning path
  8. Who this learning path is for
  9. Reader feedback
  10. Customer support
  11. 1. Module 1
  12. 1. Getting Started
  13. Setting up the framework
  14. Building our first Bootstrap example
  15. Optionally using the CDN setup
  16. Community activity
  17. Bootstrap and web applications
  18. Browser compatibility
  19. Summary
  20. 2. Creating a Solid Scaffolding
  21. Building our scaffolding
  22. Fluid container
  23. We need some style!
  24. Manipulating tables
  25. Like a boss!
  26. Final thoughts
  27. Summary
  28. 3. Yes, You Should Go Mobile First
  29. Bootstrap and the mobile-first design
  30. How to debug different viewports at the browser
  31. Cleaning up the mess
  32. Creating the landing page for different devices
  33. Summary
  34. 4. Applying the Bootstrap Style
  35. Summary
  36. 5. Making It Fancy
  37. Paying attention to your navigation
  38. Dropping it down
  39. Making an input grouping
  40. Getting ready for flexbox!
  41. Summary
  42. 6. Can You Build a Web App?
  43. Adding the navigation
  44. Do a grid again
  45. Playing the cards
  46. Implementing the main content
  47. Creating breadcrumbs
  48. Finishing with the right-hand-side content
  49. Summary
  50. 7. Of Course, You Can Build a Web App!
  51. Waiting for the progress bar
  52. Creating a settings page
  53. Summary
  54. 8. Working with JavaScript
  55. Awesome Bootstrap modals
  56. Creating our custom modal
  57. A tool for your tip
  58. Pop it all over
  59. Making the menu affix
  60. Finishing the web app
  61. Summary
  62. 9. Entering in the Advanced Mode
  63. The last navigation bar with flexbox
  64. Filling the main fluid content
  65. Filling the main content
  66. Overhead loading
  67. Fixing the toggle button for mobile
  68. Summary
  69. 10. Bringing Components to Life
  70. Fixing the mobile viewport
  71. Learning more advanced plugins
  72. Summary
  73. 11. Making It Your Taste
  74. Working with plugin customization
  75. The additional Bootstrap plugins
  76. Creating our Bootstrap plugin
  77. Defining the plugin methods
  78. Creating additional plugin methods
  79. Summary
  80. 2. Module 2
  81. 1. Introducing Bootstrap 4
  82. Summary
  83. 2. Using Bootstrap Build Tools
  84. Download the Bootstrap source files
  85. Setting up the blog project
  86. Setting up the JSON files
  87. Creating our first page template
  88. Summary
  89. 3. Jumping into Flexbox
  90. Ordering your Flexbox
  91. Wrapping your Flexbox
  92. Setting up the Bootstrap Flexbox layout grid
  93. Setting up a Flexbox project
  94. Designing a single blog post
  95. Summary
  96. 4. Working with Layouts
  97. Inserting rows into your layout
  98. Adding columns to your layout
  99. Choosing a column class
  100. Creating a simple three-column layout
  101. Mixing column classes for different devices
  102. Coding the blog home page
  103. Using responsive utility classes
  104. Summary
  105. 5. Working with Content
  106. Learning to use typography
  107. Customizing headings
  108. How to style images
  109. Coding tables
  110. Summary
  111. 6. Playing with Components
  112. Basic button examples
  113. Creating outlined buttons
  114. Checkbox and radio buttons
  115. Coding forms in Bootstrap 4
  116. Creating an inline form
  117. Adding validation to inputs
  118. Using the Jumbotron component
  119. Adding the Label component
  120. Using the Alerts component
  121. Using Cards for layout
  122. Updating the Blog index page
  123. How to use the Navs component
  124. Adding Breadcrumbs to a page
  125. Using the Pagination component
  126. How to use the List Group component
  127. Summary
  128. 7. Extending Bootstrap with JavaScript Plugins
  129. Coding Tooltips
  130. Avoiding collisions with our components
  131. Using Popover components
  132. Using the Collapse component
  133. Coding an Accordion with the Collapse component
  134. Coding a Bootstrap Carousel
  135. Summary
  136. 8. Throwing in Some Sass
  137. Using Sass in the blog project
  138. Importing partials in Sass
  139. Creating a collection of variables
  140. Customizing components
  141. Writing a theme
  142. Summary
  143. 9. Migrating from Version 3
  144. Big changes in version 4
  145. Updating your variables
  146. Additional global changes
  147. Other font updates
  148. Migrating components
  149. Migrating JavaScript
  150. Miscellaneous migration changes
  151. Summary
  152. 3. Module 3
  153. 1. Revving Up Bootstrap
  154. What Bootstrap 4 Alpha 4 has to offer
  155. Setting up our project
  156. Summary
  157. 2. Making a Style Statement
  158. Image elements
  159. Responsive utilities
  160. Helper classes
  161. Text alignment and transformation
  162. Summary
  163. 3. Building the Layout
  164. Adding Bootstrap components
  165. Summary
  166. 4. On Navigation, Footers, Alerts, and Content
  167. Improving navigation using Scrollspy
  168. Customizing scroll speed
  169. Icons
  170. Using and customizing alerts
  171. Creating a footer
  172. Creating and customizing forms
  173. Form validation
  174. Progress indicators
  175. Adding content using media objects
  176. Figures
  177. Quotes
  178. Abbreviations
  179. Summary
  180. 5. Speeding Up Development Using jQuery Plugins
  181. Enhanced pagination using bootpag
  182. Displaying images using Bootstrap Lightbox
  183. Improving our price list with DataTables
  184. Summary
  185. 6. Customizing Your Plugins
  186. Customizing plugins
  187. Writing a custom Bootstrap jQuery plugin
  188. Summary
  189. 7. Integrating Bootstrap with Third-Party Plugins
  190. Hover
  191. Summary
  192. 8. Optimizing Your Website
  193. Minifying CSS and JavaScript
  194. Introducing Grunt
  195. Running tasks automatically
  196. Stripping our website of unused CSS
  197. JavaScript file concatenation
  198. Summary
  199. 9. Integrating with AngularJS and React
  200. Introducing React
  201. Summary
  202. Bibliography
  203. Index

Coding a Bootstrap Carousel

Carousel is a popular component used on many different types of websites. We're going to build a Carousel in the Blog Post template of our project. Let's start by opening up blog-post.ejs from the project directory in your text editor. After the page title block of code, insert the following markup:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
  <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
  </ol> 
  <div class="carousel-inner" role="listbox"> 
    <div class="carousel-item active"> 
      <img src="..." alt="First slide"> 
    </div> 
    <div class="carousel-item"> 
      <img src="..." alt="Second slide"> 
    </div> 
    <div class="carousel-item"> 
      <img src="..." alt="Third slide"> 
    </div> 
  </div> 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="icon-prev" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
  </a> 
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="icon-next" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
  </a> 
</div>

This is a larger component like the Accordion so let's go through it section by section:

The Carousel component starts with a <div> and it needs a unique ID. In this case, #carouselOne. Also include the following classes: .carousel and .slide. Finally, you need to add the attribute data-ride with a value of carousel.

Adding the Carousel bullet navigation

The first thing we need to add to the Carousel is the bullet or indicator navigation. It's made up of an ordered list. Here's the code, then we'll break it down:

<ol class="carousel-indicators"> 
  <li data-target="#carouselOne" data-slide-to="0" class="active"></li> 
  <li data-target="#carouselOne" data-slide-to="1"></li> 
  <li data-target="#carouselOne" data-slide-to="2"></li> 
</ol>

Here's how the Carousel navigation works:

  • On the <ol> tag allocate a class of .carousel-indicators.
  • Each <li> in the list needs to have a few things:
    • The data-target needs to be the same ID that you gave to your root Carousel <div>, in this case, #carouselOne.
    • Include the data-slide-to attribute and the first value should be 0. Increase it by one for each list item after the first.

Including Carousel slides

The next step is to include the actual Carousel slides. I'm not going to include images in the code, that will be up to you to insert, but don't worry, I'll show you where to put them. Here's the code for the section that wraps the slides:

<div class="carousel-inner" role="listbox"> 
  .. 
</div>

Give that <div> a class of .carousel-inner and add the role attribute with a value of listbox. Inside this <div> you're going to add another section for each image slide in the Carousel. Here's the code for one slide in the Carousel:

<div class="carousel-item active"> 
  <img src="..." alt="First slide"> 
</div>

Let's breakdown what's happening here in the code:

  • In this case, insert a <div> tag with the classes .carousel-item and .active

Note

Note you should only include the .active class on the first slide. This is where the Carousel will start on page load.

  • Inside the <div>, insert an img tag with the following attributes:
    • Insert the src attribute and the value should be the path to the image file for the slide
    • Optionally, include an alt attribute with a value for the image

Adding Carousel arrow navigation

The last thing we need to add to the Carousel is the arrow navigation. Here's the code for rendering the arrows:

<a class="left carousel-control" href="#carouselOne" role="button" data-slide="prev"> 
  <span class="icon-prev" aria-hidden="true"></span> 
  <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#carouselOne" role="button" data-slide="next"> 
  <span class="icon-next" aria-hidden="true"></span> 
  <span class="sr-only">Next</span> 
</a>

Let me explain how the arrow navigation works:

  • The left and right arrow navigation is based on href tags.
  • The first will be the left arrow; code a link with the following classes on it: .left and .carousel-control.
  • The href for the link should be set to the main ID for the Carousel, in this case, #carouselOne.
  • Set the role attribute to button.
  • Finally, set the data-slide attribute to prev.
  • Within the link, add a <span> with a class of .icon-prev on it. This will render the arrow icon. Include the aria-hidden attribute and set it to true.
  • Lastly, you can include another optional <span> for accessibility reasons. If you want to include it, give it a class of .sr-only. Within the <span> include the text Previous.
  • Now let's go over the differences for the right arrow:
    • Code another link tag and switch the .left class to .right.
    • Change the data-slide attribute value to next.
    • In the first <span> tag change the class value to .icon-next.
    • If you included the accessibility <span> tag change the text to Next.

That completes the setup of the Carousel component. Fire up the project server and view the Blog Post page in the browser, and it should look like this:

Adding Carousel arrow navigation

That concludes the chapter on JavaScript components in Bootstrap. In this chapter, I taught you how to code up the following components: Modals, Tooltips, Popovers, Collapse, Accordion, and the Carousel. In the next chapter, I'll teach you how to use Sass in Bootstrap.