Adding Bootstrap components: Modals

Bootstrap makes surfacing modal windows extraordinarily simple. It is simply a case of creating the modal markup, using Bootstrap’s modal classes, and using HTML attributes, data-toggle, data-target, and data-dismiss, to surface and remove the modal.

What is a modal window?

A modal window in web development is an element that is layered on top of the main webpage content to give the impression of a separate window, which requires user interaction and prevents the user from using the main content.

First, let’s update the profile and settings elements with the data-toggle and data- target attributes:

<a

class=”dropdown-item”

href=”#”

data-toggle=”modal”

data-target=”#profile-modal”>

Profile

</a>

<a

class=”dropdown-item”

href=”#”

data-toggle=”modal”

data-target=”#settings-modal”>

Settings

</a>

We set data-toggle=”modal” to tell Bootstrap that we want to open a modal, and data- target is a reference to the id of the modal we want to surface. Let’s go ahead and create these models.

As a sibling to the nav element, we add the following modal markup:

<div class=”modal” id=”profile-modal” role=”dialog”>

<div class=”modal-dialog” role=”document”>

<div class=”modal-content”>

<div class=”modal-header”>

<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>&times;</span>

</button>

<h4 class=”modal-title” id=”profile-modal- label”>Profile</h4>

</div>

<div class=”modal-body”>

Profile

</div>

</div>

</div>

</div>

<div class=”modal” id=”settings-modal” role=”dialog”>

<div class=”modal-dialog” role=”document”>

<div class=”modal-content”>

<div class=”modal-header”>

<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>&times;</span> </button>

<h4 class=”modal-title” id=”settings-modal- labeln>Settings</h4>

</div>

<div class=”modal-body”>

Settings

</div>

</div>

</div>

</div>

Let’s explain what is happening in this piece of code. We apply the modal class to the parent element. The ID of the element corresponds to the value of the data-target attribute of the element we want to use to surface the modal. Within that div, we use Bootstrap’s modal classes to define nested elements to represent the modal itself (modal-dialog), the content of the modal (modal-content), the header of the modal (modal-header), and the body of the modal (modal-body). We also define the title of the modal using modal-title and a Close button. The Close button includes a data-dismiss=”modal” attribute, which allows the user to close the modal just by clicking anywhere off the modal. Let’s take a look at how the Profile modal renders. Take a look at the following screenshot:

Figure 3.20: Using Bootstrap’s modal to display an empty dialog (example15.html)

That’s pretty nice, considering that it required very little markup.

We have a pretty nice navigation in place now; well, a functional navigation. It does not really fit in well with the rest of our site, though. Let’s create our own custom navigation style for MyPhoto.

1. Styling

Bootstrap’s navbar comes with two built-in styles: navbar-light, which we currently use, and navbar-dark. To add a new style, we can add a new class to _navbar.scss, add new color variables to _variables.scss, recompile Bootstrap, and then apply the class to our navbar element. However, applying changes directly to Bootstrap source files is a bad practice. For instance, we use Node to add Bootstrap, along with other third-party components, to our project. If we were to add new styles to Bootstrap source files, we would need to add Bootstrap to our repository and use that version, instead of Node, or else other developers on your team would not get the changes. Also, if we wanted to use a new version of Bootstrap, even a minor or patch release, it would force us to reapply all our custom changes to that new version of Bootstrap.

Instead, we will apply the changes to the MyPhoto style sheet. Add the following rules to myphoto.css:

.navbar-myphoto {

background-color: #504747;

border-color: black;

border-radius: 0;

margin-bottom: 0px;

}

.navbar-myphoto .navbar-brand {

color: white;

font-weight: bold;

}

.navbar-myphoto .nav-item > .nav-link {

color: white;

}

.navbar-myphoto .nav-item > .nav-link:hover {

background-color: #504747;

color: gray;

}

.navbar-myphoto .nav-pills > li.active > a {

background-color: #504747;

color: gray;

}

.navbar-myphoto .dropdown-menu {

background-color: #504747;

border-color: black;

}

.navbar-myphoto .dropdown-menu > a {

color: white;

background-color: #504747;

}

.navbar-myphoto .dropdown-menu > a:hover {

color: gray;

background-color: #504747;

}

.navbar-myphoto .dropdown-menu > a:focus {

color: gray;

background-color: #504747;

}

.navbar-myphoto .dropdown-menu > .active > a:focus {

color: gray;

background-color: #504747;

}

.navbar-myphoto > .navbar-toggler {

color: white;

}

.nav-pills > .active > a, .nav-pills > .active > a:hover {

background-color: grey;

}

.nav-pills .nav-link.active, .nav-pills .nav-link.active:focus, .nav-pills .nav-link.active:hover,

.nav-pills .nav-item.open .nav-link,

.nav-pills .nav-item.open .nav-link:focus,

.nav-pills .nav-item.open .nav-link:hover {

background-color: grey;

}

.navbar-myphoto>.navbar-toggler {

color: white;

border: 1px solid rgba(255, 255, 255, 0.5);

}

.navbar-myphoto .navbar-toggler-icon {

background-image: url(“data:image/svg+xml;charset=utf8,

<svg viewBox=’0 0 30 30′ xmlns=’http://www.w3.org/2000/svg’>

<path stroke=’rgba(255, 255, 255, 0.5)’ stroke-width=’2′ stroke- linecap=’round’ stroke-miterlimit=’10’ d=’M4 7h22M4 15h22M423h22’/>

</svg>

“);

}

We have added a new class, navbar-myphoto. The navbar-myphoto class uses the same dark background as bg-myphoto-dark and removes the margin-bottom navbar applied by default. We then have to apply rules for the classes that are usually nested within a navbar element. We apply font and background rules across these classes, in their various states, to keep in line with the general style of MyPhoto. These rules can be made more succinct using a preprocessor, but we will not add that complexity to this project. Last but not least, we have added styles to prevent the hamburger icon from becoming invisible.

In the markup, replace navbar-light with navbar-myphoto. Take a look at the screenshot in figure 3.21:

Figure 3.21: The custom-styled navigation bar with drop-down (example16.html)

With these new styles, we now have a style-appropriate navbar for MyPhoto; that’s pretty neat.

Last but not least, let’s try and improve the overall look and feel of our website by adding some nice fonts. We will use two freely available Google Fonts. Specifically, we will use Poiret One (https://www.google.com/fonts/specimen/Poiret+One) for our navbar and headers and Lato (https:// www.google.com/fonts/specimen/Lato) for everything else. To be able to use these fonts, we must first include them. Insert the following two lines into the head of our index.html:

<link href=”https://fonts.googleapis.com/css?family=Poiret+One”

rel=”stylesheet” type=”text/css”>

<link href=”https://fonts.googleapis.com/css?family=Lato&

subset=latin,latin-ext” rel=”stylesheet” type=”text/css”>

Then, insert the following lines of code into myphoto.css:

h1, h2, h3, h4, h5, h6, .nav, .navbar {

font-family: ‘Poiret One’, cursive;

}

body {

font-family: ‘Lato’, cursive;

}

Take a look at the screenshot in figure 3.22:

Figure 3.22: MyPhoto styled using Google Fonts: Poiret One and Lato (example16.html)

Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.

Leave a Reply

Your email address will not be published. Required fields are marked *