In this chapter, we will cover:
In this recipe, we will create four alerts that will appear in the top-right corner of a web page. To see the final result, open the chapter4/complete code's app folder, and run the git bash command on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.
Upon opening the web page as explained in the preceding paragraph, you should see the four alerts appearing one after the other. Click on the close button to close any of them, and note how they are being closed with various jQuery effects.
To get acquainted with the alert component of the Bootstrap 4 framework, refer to the official documentation at https://v4-alpha.getbootstrap.com/components/alerts/.
In this recipe, we will alter the behavior of the modal component, so as to have it completely cover the available screen space.
To see the final result, open the chapter4/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.
Upon opening the web page as explained in the preceding paragraph, you should see a large Click Me button that will trigger the modal, which will then appear and cover the entire viewport.
To get acquainted with the modal component in Bootstrap 4, visit https://v4-alpha.getbootstrap.com/components/modal/.
In this recipe, we will alter the pop-up component so that it can be dismissed by clicking anywhere on the page.
To see the final result, open the chapter4/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.
Upon opening the web page as explained in the previous paragraph, you should see a large Dismissible popover button. Clicking on the button will make the popover appear. Clicking again (anywhere on the page) will close the popover.
To get acquainted with the popover component in Bootstrap 4, visit https://v4-alpha.getbootstrap.com/components/popovers/. Also, visit http://tether.io/ for additional information, as popovers rely on this third-party library to work.
Test the default behavior of the popover component by checking out the live demo section at https://v4-alpha.getbootstrap...
In this recipe, we will change the ToolTip component so that it has a different color, as well as a different opacity, from what we have in the default options.
To see the final result, open the chapter4/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.
Upon opening the web page as explained in the previous paragraph, you should see four buttons. Hovering over each of the buttons will trigger ToolTips in four different directions.
To get started with the ToolTip component in Bootstrap 4, visit https://v4-alpha.getbootstrap.com/components/ToolTips/. Also, visit http://tether.io/ for additional information, as ToolTips relies on this third-party library to work.
Test the default behavior of the ToolTip component by checking out the interactive demo section at https://v4...
This recipe will involve some SCSS mixins, which will alter the behavior of the card-columns component. To be able to showcase the desired effect, we will have to have a few hundred lines of compiled HTML code.
This poses an issue; how do we show all that code inside a recipe? Here, Harp partials come to the rescue! Since most of the code in this recipe is repetitive, we will make a separate file. The file will contain the code needed to make a single card. Then, we will have a div with the class of card-columns, and this div will hold 20 cards, which will, in fact, be 20 calls to the single card file in our source code before compilation. This will make it easy for us to showcase how the number of cards in this card-columns div will change, based on screen width.
To see the final result, open the chapter4/complete code's app folder, and run the console (that is, bash) on it. Follow it up with the harp server command...
This recipe is closely connected with the preceding one. To show how to make cards responsive, we will use the preceding recipe's single card include.
To see the final result, open the chapter4/complete code's app folder, and run the git bash on it. Follow it up with the harp server command, and navigate to localhost:9000 in your browser to see the result we will achieve in this recipe.
Upon opening the web page as explained in the previous paragraph, you should see two rows of cards in two card decks. The container that holds them is styled with the .container-fluid class. Open the dev tools with F12 and drag its edge from right to left to see the decks respond to the change of the viewport.
To get acquainted with how card decks work, navigate to the card decks section of the Bootstrap documentation at https://v4-alpha.getbootstrap.com/components/card/#card-decks.
In this recipe, we will position an inline form in the center of the viewport, on the left, and on the right. To achieve that, we will be using flexbox classes of justify-content-center, justify-content-start, and justify-content-end.
To get acquainted with how forms work, navigate to the forms component section of the Bootstrap documentation at https://v4-alpha.getbootstrap.com/components/forms/.
chapter4/start/app/recipe04-09.ejs, and add the following code:<div class="container-fluid"> <div class="mt-5"> <h1><%- title %></h1> <p><a href="https://v4-alpha.getbootstrap.com/components/forms/" target="_blank">Link to bootstrap forms docs</a></p> </div> </div><!-- /.container -->
<div class="container-fluid mt-5">...
© 2017 Packt Publishing Limited All Rights Reserved
