| Coursera-Bootstrap |
|---|
Front-End Web UI Frameworks and Tools: Bootstrap 4 |
Welcome to Front End Web UI Frameworks and Tools: Bootstrap 4.
I'm glad you decided to join this course to learn about the most popular front end Web UI Framework: Bootstrap.
We'll look at various aspects of Bootstrap. Through several examples, you will learn by doing exercises as part of this course.
Let's look at some details next. Before you begin this course, please make sure that you have sufficient background to be able to succeed in this course.
You should have a good knowledge of HTML, CSS, and JavaScript before you start the course.
From my perspective, web design and development consists of two aspects: one is the design of the website and the web page, the second one is the actual building and deployment of the web page itself.
From the design perspective, what I mean is the design of the user interface and the user experience, the visual design, the prototyping, the elements of colors, graphics and animation that might be of interest.
In this Specialization, we are not looking at this aspect of web development.
Instead, we are looking at that second aspect, which is the development, building, and deployment of websites and web pages, using technologies like the front end web UI frameworks like Bootstrap, maybe JavaScript framework like Angular or a Library like React and hybrid mobile frameworks to design mobile applications and also server-side development using Node, Express, MongoDB, the main stack in more detail.
If you are looking at the Specialization, thinking about the design aspect of website, then you may wish to rethink again.
This Specialization concentrates on the development building and deployment of website and web pages, a purely technical knowledge on using the HTML, CSS, and JavaScript-based skills for actual website development.
You're also probably wondering about what is meant by full stack web development.
We'll look at more details of full stack web development in the next lesson.
In particular, if you're looking at how this course is positioned in the general context of full stack web development, in this course, we are dealing with front end web UI development.
In particular, the UI Framework Bootstrap 4.
-
We'll be looking at the remaining aspects of full stack web development in the rest of this specialization.
-
This course looks at Bootstrap in great detail. We will also look at responsive web design and how Bootstrap supports responsive web design through the Bootstrap Grid system.
-
We'll look at the CSS and JavaScript-based components in Bootstrap and how you can make use of them in building your website and your web pages.
-
Along the way, we'll learn about that web development using the command line.
-
We'll learn a lot of web tools that are based on the command line and the Node.js ecosystem.
-
We'll briefly review Git, add Node.js and look at Noje.js based tools including task runners like Grunt and Gulp.
This course, itself, is structured into four modules.
Each module roughly corresponding to one week of work.
-
In the first module, we'll get the big picture view of full stack web development, then you'll get a quick introduction to Git and Node.js.
a. Then we'll introduce you to the Bootstrap and then review the Bootstrap Grid system.
b. That will lead you up to the first assignment in this course.
-
The second module deals with Bootstrap CSS components.
a. We'll look at the design of the Bootstrap navigation bar and how we can make use of it to support navigation.
b. We'll look at user input through buttons and forms then we'll look at how we can display content using tables and cards.
c. Then we'll look at how we can include images and media into our Web page using images, thumbnails, and media objects.
d. And then, finally, we look at how we alert users using tags, alerts and progress bars.
e. This should lead you up to your second assignment.
-
The third module deals with Bootstrap JavaScript components.
a. We'll look at the big picture view of how Bootstrap JavaScript components work, we'll review tabs, pills and tabbed navigation, then we'll look at how collapse and accordion can be used to show and hide content.
b. And then we'll look at the use of tooltips, popovers and modals to reveal content to be displayed in your page.
c. And then we'll look at the carousel component, which allows you to display sliding information on your web page.
d. This will lead you up to the third assignment in this course.
-
The fourth (and last) module deals with Bootstrap and the JQuery and various dev tools.
a. We'll, in particular, look at how Bootstrap and JQuery interact and how you can write JQuery and JavaScript code in order to control your Bootstrap JavaScript component.
b. We look at the various methods that are supported by the Bootstrap > JavaScript components, which can be leveraged to write JavaScript > code to control the behavior of these components.
c. Then we'll review CSS pre-processing language is like LESS and Sass.
d. Then, finally, we'll look at how we can build and deploy our website using NPM scripts or task runners like Grunt and Gulp.
This should take you all the way to the final assignment in this course. I hope you will have a lot of fun doing the various parts of this course and also enjoy the exercises that you'll encounter at each stage that enable you to better understand various aspects of the Bootstrap web UI framework.
This lesson gives you a big picture view of the Full Stack Web Development. The lecture gives you an overview of full stack web development.
-
Understand what is meant by full stack in the context of web development
-
Distinguish between front-end, back-end and full stack web development
-
Understand the position of this course in the context of this specialization.
Let me clarify to you a few terms so that we started a common understanding of full stack web development as applied in this special session.
We often hear people talking about the front end and back end.
The front end is where we are delivering the content to the user, typically, in a browser where they use accesses the information, and this is where we use technologies like HTML, CSS and JavaScript to render the content for to the user.
This information delivery is supported behind the scenes by a back end support which is typically implemented these days using technologies like PHP, Java, ASP.NET, Ruby, Python or NodeJS.
We often hear people talking about the three tier architecture for Web Development.
In this approach, the entire web application is organized into three different layers.
The presentation layer, which is concerned with delivering to the user.
This is usually the UI-related concerns that are dealt with at the presentation layer.
The business logic layer, on the other hand, is concerned more about the data, the data validation, the dynamic content processing, and generating the content to be delivered to the user.
This is backed up behind the scenes with the data persistence layer or the data access layer.
This is concerned with how we store and interact with the data, typically, in the form of a database and access this data through an API.
Exploring this further, let us see what is implemented typically in the traditional web development in each of these three layers.
The Business Logic Layer is usually implemented these days using technologies like Ruby, Python, PHP, JAVA, C++ or ASP.NET.
This Business Logic Layer is interacting behind the scenes with the persistent data typically stored in a relational database and accessed by the Business Logic Layer.
The Business Logic Layer is also concerned with the rendering of information to the front side, typically, in the form of server-side rendering these days.
The HTML, CSS and JavaScript is generated on the server-side and then sent over to the client side in the form of a web page.
In this approach, we need specialists in each of these three layers.
Front end specialists, typically, would be well-versed in HTML, CSS, and JavaScript.
The business logic specialist would be well-versed in one of the technologies that is used for implementing the business logic and then you need a data specialist who will be well-versed in the relational database management system.
There is an increasing trend towards using a single language to implement the entire stack, this being JavaScript so you could have the front end implemented, for example, as a single page application using frameworks like Angular or React.
You have the server-side or the Business Logic Layer being implemented using technologies like NodeJS, which is also dependent on and JavaScript and then you have the data storage, itself, being implemented using technologies like MongoDB, which stores data in the form of JSON documents.
And the information exchange between the server side and the client side is usually done using JSON as the format and the server side supports a REST API endpoint.
We will cover these technologies as part of this specialization.
As you go through the specialization, you will see that on the presentation layer side, we will cover Bootstrap four and Angular or Reactfull for implementing front end applications while on the Business Logic Layer we will be using NodeJS and NodeJS modules and express for implementing the Business Logic Layer.
We will also consider back end as a service and then the data support implemented using MongoDB.
At the end of this lesson you should have set up Git and Node.js on your computer. At the end of this lesson, you will be able to:
-
Set up a Git repository and perform basic Git operations
-
Set up and use online Git repositories
-
Use Node-based modules to perform basic operations.
-
Text editor of your choice: Any text editor that you are already familiar with can be used for editing the project files. I will be using Visual Studio Code as the editor of choice in this specialization. You may also consider other editors such as Brackets, Sublime Text, or Atom.
-
Browser of your choice: You may use your preferred browser. I will be using Chrome as the browser in all the exercises. All the exercises and assignments in this course have been tested using Chrome v. 46. Please note that not all browsers may support all the HTML5 features to the same extent. You might encounter problems when using other browsers. I strongly urge you to use the latest Chrome browser for the exercises and assignments in this course so that any problems are minimized.
-
Command line shell: Familiarity with the command-line shell will be essential for the exercises. In Windows a cmd window or power shell with admin privileges would be needed. On a Mac or in Linux, a terminal window can be used. Please get familiar with the "sudo" command in OS X and Linux.
-
Files required for the exercises: We will provide additional starter files for the exercises wherever needed. Links to download the files will be provided inline in the exercise instructions that follow each exercise video. Please download the files provided there, if any, before beginning the exercise. The links are also available through the Additional Resources of the specific lesson.
Note: Please remember to retain the folders and all the files that you create in the exercises. Further exercises will build upon the files that you create in the preceding exercises. DO NOT DELETE the files at the end of the exercises, unless otherwise instructed. You may wish to set up your exercise folder as a Git repository and commit the files to the repository at the end of each exercise.
Git is a very popular version control system for software.
We need Git for working with our node ecosystem that we're going to use throughout this specialization.
It is important for you to get Git on to your computer.
Let's go through a few quick steps to set up Git on your computer and then some quick commands to enable us to make use of Git in this specialization.
I will not go into too much details about version control and how Git works, and so on.
That is beyond the scope of this course. Instead, we'll just get some basic understanding of Git.
Git is, as I said, a version control system.
This is a software tool that enables us for the management of changes to source code and maintaining your version history.
As your source code evolves, you will be able to check in the code at different points of times so that you can always have a way of rolling back to a previous version, in case your updates to the code doesn't work correctly.
There are various version control systems that are in use in the real world, including CVS, SVN, and Git being a very popular mechanism for version control these days. Where did Git originate?
Git was designed by Linus Torvalds, the person behind the Linux Operating System.
Git was designed as a version control system and distributed version control system for use in Linux kernel development and it has seen much wider deployment in the real world, these days.
That node ecosystem is very much tied into Git and that is the reason why we need Git for this specialization.
Let's now move on to a Few hands on exercises, where you will first set up Git.
Then you will learn a few basic Git commands.
And then also understand how you can set up an online repository in places like Git Hub or Bit Bucket for synchronizing your source code from your computer to the online repository.
This is obviously not a comprehensive tutorial on the Git but we'll learn just enough, that of the commands that are necessary for use in this specialization.
Let's now run through a few quick steps to set up Git on your computer.
One easy way of setting up Git on a computer is to go to this site called git-scm.com.
And then download the Git installation files from there.
When you visit this website, git.scm.com, you will see on the right-hand side, a button for you to download to Git.
If you want to you can go directly to the Downloads page here on the site, and then you will find the downloads for various platforms and you can download the one for your specific platform for installation.
This is the easiest way of getting Git onto your computer.
There are other ways of setting up Git, depending on your platform.
For example, if you install GitHub Desktop on your computer, it'll automatically set up Git for you.
If you are using a Mac and you set up x code and especially the x code command line tools, that will also set up Git for you.
On this site, gitscm.com, if you go to the documentation page you will notice that there is a book here called Pro Git.
You can just go on to the Getting Started link.
You will see a specific chapter here on Installing git.
Go to this Installing Git site and there you have more details about how to install Git on your specific platform.
Download the installer and run through the set up to get Git on to your computer.
Once you install Git on a computer Start up a command window or PowerShell if you're using a Window machine or start up a terminal window if you're using a Mac or Linux machine and then at the prompt type in git --version to check what version of git is installed on your computer.
On my machine I have this current version of git installed and that is good enough for me to work with.
Once we verify that Git is installed, we will configure a couple of global identity parameters, the username and email address.
Whenever Git does any comments as you will learn later, it will make use of this information.
To do that, at the prompt type git config --global user.name "Username", and then you can type in your user name.
$ git config --global user.Email brianbauska@gmail.com
The other parameter that I'm going to configure is my email.
And to insure that this information has been configured, we can type
$ git config --list
And it will list out a bunch of configurations that we have. Done.
Some of these are automatically set up for you.
But if you want to, you can set them up as you require.
Here I have my core editor value set to vi, which is what I use to do command line editing of files.
With this, we have completed the setup git for use on our computer.
Once you get git on your computer it is time to go and learn git bit by bit.
In this exercise you will learn to install Git on your computer. Git is required for using all the remaining Node.js and Node based tools that we encounter in the rest of the course. At the end of this exercise, you would be able to:
-
Install Git on your computer
-
Ensure that Git can be used from the command-line or command-prompt on your computer
-
Set up some of the basic global configuration for Git
-
To install Git on your computer, go to here to download the Git installer for your specific computing platform.
-
Then, follow the installation steps as you install Git using the installer.
-
You can find more details about installing Git at Git-scm.com. This document lists several ways of installing Git on various platforms.
-
Installing some of the GUI tools like GitHub Desktop will also install Git on your computer.
-
On a Mac, setting up XCode command-line tools also will set up Git on your computer.
-
You can choose any of the methods that is most convenient for you.
-
Open a cmd window or terminal on your computer.
-
Check to make sure that Git is installed and available on the command line, by typing the following at the command prompt:
$ git --version
- To configure your user name to be used by Git, type the following at the prompt:
$ git config --global user.name "Your Name"
- To configure your email to be used by Git, type the following at the prompt:
$ git config --global user.email <your email address\>
- You can check your default Git global configuration, you can type the following at the prompt:
$ git config --list
At the end of this exercise you should have Git available on the command-line of your computer.
Let us now explore some basic Git commands that are very useful for us in this specialization.
There is lot more to Git than what we cover in this exercise.
To get started go to your convenient location on your computer and then create a folder named git-test.
Then, open this folder in your favorite editor.
Here, I have the GIT-TEST folder that we just created open in my Visual Studio Code.
Let me add a file to this folder named index.html, now you can see that I have added in some HTML code into this index.html file.
Let's save the changes.
Now let's switch to our command line, at the command line go to the git-test folder, and let's initialize this folder to be a git repository.
To do that at the command line type git init.
Now, this folder has been initialized to be a git repository.
This is our first git command that we have learnt, > git init.
This initializes the current folder as a git repository and when it initializes the folder, it will mark that folder as a master.
This is the master branch for my kit.
Now let's not worry about branches and so on, we will not deal with that in this course.
We will only be working with the master branch, in this particular specialization.
This would be marked as a master.
Now this is the initial point of our repository.
The next command that we're going to look at is > git status.
If you type git status in the command line, it'll tell you the current status of the folder.
Let's do that at the command line and see what it shows.
At the command line, type git status and read the information that is tapped out on the command window.
You see that it says on branch master, so that is the master branch that we add on.
And it says, untracked files, and then shows index.html in red.
On your specific computer, it may be using different colors or represent this differently or this is what it shows on my Mac.
Now, this index.html file that we have just created in this folder is now not been added to our git repository.
Let's go ahead and add that file to the git repository.
To do that, we say, > git add, and you can simply say dot, which means that all the files in the current directory will be added to what is called as the staging area of my git repository.
Now, if I again type > git status, you will see that the file index.html is marked in green.
And it says, changes to be committed there and then shows the file name and then so that means that this file is now ready to be committed to my git repository.
The next command that we saw was > git add.
By using git add you can add file or folders to that staging area.
Once you add it to the staging area, then you can commit that snapshot of our folder status to our git repository.
That means that when you do the > git commit, what this command will do is commit the current state of our folders into our git repositories.
All the files as they exist at the moment, once they have been staged using the git add, then they will be committed to our git repository when we execute the git command folder.
At this point when we execute the git command, then our initial state will now be changed to the first commit to the git repository.
Let's go ahead and do that.
Back at the command prompt, let's type > git commit.
And then we can even add a message to our commit.
I'm going to say > git commit -m "first commit" because this is our commit to our git repository.
When I do that, it says, okay, 1 file has been added to the git repository and some other information will be typed out on to the command window.
Let's now check again, git status and now you see that it says nothing to commit, working directory is clean.
What it means is that the current state of my working directory or working folder has been committed to the git repository, so a snapshot has been committed to my git repository.
Now, I can type the next command called > git log --oneline, and see that it shows a number there, an eight digit number there, and then also it shows the message that we put into our commit saying first commit.
That is the log of all the commits that have been put into my git repository.
Going back to our next git command, we saw that > git log --oneline will show us a brief log of all the commits.
If you simply type git log display a lot more detailed information about all the commits.
But this is sufficient enough for obtaining information that we require.
Let's now come back to our editor here, in Visual Studio Code, so I'm going to add more changes to my index.html file.
I have changed my index.html file.
Now, let me add another folder under the git test folder, so I will create a subfolder here named templates, and inside these templates folder, I'm going to create another file name, test.html.
This is just to show you how git can commit entire folder hierarchy into its repository.
With test.html now there, I'm just going to copy everything from my index.html into my test.html, and save the changes.
Going back to the command line, let's now check out the status of our git repository and this folder.
Type in > git status, shows that the index status html file that we have already handed earlier to the repository has now been modified, so there is a newer version of the index.html file.
Also, it shows that there are some untracked files in this folder called templates.
Let's add all these changes to the staging the area, so again, type > git add.
And then all these files will be added to the staging area.
Again, checking out the status.
You now see that changes that have been added to the staging area.
All these files have been added to the staging area.
Let's do one more commit, so I would say > git commit -m, second commit and then let's check out the log. If you check out the log, you'll now see that there are two commits in my git repository, the first and the second commit.
And note that each one of them is given a different number there.
If you want to see their full details of the log, you can type simply, git log and then you'll receive more details in there.
Then what you would be interested in.
Notice that the oneline commit only gives the first few characters of my commit number there.
That is sufficient enough for us to operate with.
Let me now go back again to my Visual Studio, and then add one more.
One more line to my index.html file.
Now my index.html file has been modified.
And let's save the changes.
Going back to the command line, doing git status shows that index.html file has been modified.
Let's add this to the staging area, and then do a third commit.
Let's say, > git add., git status, now you see that the index.html the modified version has been added.
Now we can say > git commit. "third commit" and do > git log --oneline, and you see there are three commits in our repository.
Now our repository contains snapshots of three different points, at the end of the first commit, at the end of the second commit, and at the end of the third commit.
Now, we also can roll back changes, we can revert the repository to a previous version.
We can pull out a file from an older commit, and then replace the existing directory from the old commit.
Let's see how we can operate with these things by learning a couple of more commands.
At this stage, our index.html file is in the current state. So you can notice that it has an h1 and two ps.
Let's now look at the next git command.
The next git command that we are going to learn about is > git checkout.
This checkout command allows us to check out a file from a previous commit in our git repository.
If we don't like the current file that we have in our folder and we want to go back to your previous version of the file, we can always check out the file from a previous commit or from the current commit and then continue to work with that file.
Let's make use of this and see some further changes to our git repository.
Going back to our command line, we remember that, between the second and the third commit, I made changes to my index.html file.
Suppose I want to revert back to the index.html file from my second commit.
Then, I can simply say, git checkout 900cfcf.
That is commit identify the number that identifies the particular commit, and then I can say index.html, and what you would notice is that, that older file will now be checked out into my current working directory.
Going to my Visual Studio Code, you'll now notice that my index.html file has reverted to the previous working so, the change that I made before the third commit it is now gone.
My index.html file has been restored to its state at the end of the second commit.
Now, at the command line, if I try git status, you'll notice that this index.html file which was reverted to what it was at the end of the second commit, it has now already been staged.
Using this git checkout, we'll pull out an older version of the file, and then replace what is in the current directory, and then it'll also check it into the staging area.
Now if I do that and then I realize that this is what I want, I can simply do another commit at this point. And then that file can be committed as the fourth commit.
But suppose I don't like this, I want to double to back to the index.html file at the end of the third commit then all I can do is say git reset, HEAD and index.html.
At this point, what happens is that the index.html, the modified version that I had checked out is still there but this file has been unstaged from the staging area.
If you go back and look at the index.html in your editor, it will still show the state at the end of the second commit.
Because we had pulled out the file using checkout for that.
Now, if you want to revert it back to what it was at the end of the third commit, then we do one more checkout from the third commit going to our command window, type git status and you would notice that the index.html is marked as modified.
But it also shows this particular statement here. It says git checkout -- and the file name, to discard the changes in the working directories.
That's one way you can discard the changes that you have made to a particular file corresponding to the previous comment.
Let me just restore that index.html back to what it was at the end of the third commit.
To do that, I could simply say git checkout -- index.html and then, if I do git status, it shows that my directory is clean.
And basically my directory has been restored to the state at the end of the third commit.
Going to the file in my Virtual Studio Code, I see that their file has been restored back to what it was at the end of the third cap.
This is one way you can, if you have made changes to your file after the commit and you want to just discard those changes, you can simply check out the file from the last commit, and then all your changes that you've done after the last commit will be discarded on the spot.
These are some basic commands that are very useful for you as you go through the courses in this specialization because you may want to commit at the end of each exercise.
And as you proceed forward, you would still have a guided vision of the state of your folder at the end of the previous exercise.
That way, if you're carrying out a new exercise and you've discovered that you've made mistakes and you want to revert back to the previous commit, you always have a way of doing that using the commands that we have just let.
With this basic understanding of this few git commands, you'll be able to proceed forward with understanding and using git in the courses of this specialization.
Now, we have reviewed the git reset for a specific file or git reset in general.
If you simply type git reset, it'll restore you back to the last commit.
It will reset the staging area to the last commit, without disturbing the changes that you have done to your working directory.
Once you reset, then you can check out the previous version of the file that you have committed in the previous commit.
This week, you can restore your folder back to the where you were at the starting point of the previous commit.
Sometimes when you are going through an exercise and you realize you missed a cue.
Always have a way of reverting back to a previous version.
With these commands, I think you're all set to go ahead to use git in the courses of this specialization.
At the end of this exercise, did you Git it?
In this exercise you will get familiar with some basic Git commands. At the end of this exercise you will be able to:
-
Set up a folder as a Git repository
-
Perform basic Git operations on your Git repository
-
At a convenient location on your computer, create a folder named git-test.
-
Open this git-test folder in your favorite editor.
-
Add a file named index.html to this folder, and add the following HTML code to this file:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
</body>
</html>
- Go to the git-test folder in your cmd window/terminal and type the following at the prompt to initialize the folder as a Git repository:
$ git init
- Type the following at the prompt to check your Git repository's status:
$ git status
- To add files to the staging area of your Git repository, type:
$ git add .
- To commit the current staging area to your Git repository, type:
$ git commit -m "first commit"
- To check the log of the commits to your Git repository, type:
$ git log --oneline
Modify index.html as follows!
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
<p>This is a paragraph</p>
</body>
</html>
-
Add a sub-folder named templates to your git-test folder, and then add a file named test.html to the templates folder. Then set the contents of this file to be the same as the index.html file above.
-
Then check the status and add all the files to the staging area.
-
Then do the second commit to your repository
-
Now, modify the index.html file as follows:
Modify index.html as follows!
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>This is a Header</h1>
<p>This is a paragraph</p>
<p>This is a second paragraph</p>
</body>
</html>
- Now add the modified index.html file to the staging area and then do a third commit.
- To check out the index.html from the second commit, find the number of the second commit using the git log, and then type the following at the prompt:
$ git checkout <second commit's number> index.html
- To discard the effect of the previous operation and restore index.html to its state at the end of the third commit, type:
$ git reset HEAD index.html
- Then type the following at the prompt:
$ git checkout -- index.html
- You can also use git reset to reset the staging area to the last commit without disturbing the working directory.
At the end of this exercise you should have learnt some basic Git commands. Experiment with these commands until you fully understand how to use Git.
Online Git repositories enable you to store a copy of your Git repository online.
And It can easily be shared among multiple computers and multiple users.
Let's learn about two of the online Git repository service providers, GitHub and Bitbucket, in a little bit more detail.
We'll look at how we can set up our local Git repository to be mirrored in an online Git repository.
There are several online Git repository service providers.
Two of the most popular ones are GitHub and Bitbucket.
I will go through in more detail about how you can set up your Git repository that you prepared in the previous exercise to be made out on an online Git repository on Bitbucket.
To set up in online Git repository, go to one of these online service providers and then sign up for an account.
Here, I have signed up into my Bitbucket account, and I have my homepage open here.
And so I'm going to create a new repository online on my Bitbucket repository.
I just click on the Create repository, and then this would come up with some details.
Now, this varies with the repository service provider.
Here, I will specify the name of the repository as git-test, and I'm going to mark this as a private repository.
For this course and all the remaining courses in this specialization, I would strongly advise you to keep your repositories as private repositories, because you don't want somebody else to be copying the code that you might save in your online Git repository.
Please, make sure that you only use private repositories in this specialization.
I will sign up as a get private repository, and then simply click on create repository.
And then it'll do some setup, and then be ready for me, okay?
Now, what I need to do is to copy this particular URL format repository.
You will see a URL for the repository in the home page of the repository.
Just copy that URL for the repository, because we would need that in order to synchronize our local Git repository with this repository.
I'm going to copy that.
And since I have already created my local Git repository, I'm going to go in there and set that up to be mirrored in this online Git repository.
For that, we need to use a couple of Git commands that enable us to do this.
Going to the command prompt in my Git repository folder I will type, git remote add origin.
And then paste the URL for my Bitbucket repository that I've just created, and hit the return.
Now, my local Git repository's remote origin is set to the Bitbucket repository.
Now, I want to be able to push the entire contents of my local Git repository to my online Git repository.
Reviewing the commands for setting up the online Git repository, the first one that we just did, git remote add origin and the repository URL.
And so this will add the online repository as the remote repository for my local Git repository.
Once I do that, then I need to push my contents to my online repository.
For that, I do git push -u origin master. And this command would push the local Git repository to the online repository.
Let's type that at the command prompt. So once I type this at the command prompt and hit the return, it's going to set up my Git repository. Sometimes it may ask you to type in your credentials including your password on your Bitbucket account. So you may have to do that. I had already done that previously, so that's why it didn't ask me again for the password. But once I had typed that in, then the contents of my local depository will be pushed to the server's site.
Now, the data on my local Git repository is now matched on the server.
Let's go to Bitbucket to see the status of my online Git repository now.
Going to my Bitbucket and then reviewing the online Git repository, you would see that there has been a branch, the master branch, that has been pushed to my online Git repository.
I can then examine the source by looking at the source here.
And then you can see that I have the index.html file, which is exactly the same as what I have in my local Git repository.
And examine the radius comments also, so I can look at the state in the second comment and at the first comment.
You can now see that all this information has been uploaded to the online repository, including the history of all the comments.
Then going back there, you can see more details about all the comments that have been sent to the server side.
I can examine each of those comments in a bit more detail.
And I'm going back to the source, I can look at more details of the source like that.
That has now setup my local Git repository to be mirrored in Bitbucket.
The procedure is pretty much similar even on GitHub.
Let me set up an online GitHub repository.
Now, obviously, you have to remember that your local repository can only be matched to one online repository.
I will only go through setting up the repository on GitHub, and you will notice the same kind of commands would be required if you want to set up your local repository to be mirrored on a repository on GitHub.
On GitHub, if you login to your account, you would see something like this in your homepage.
You can go to the right-hand side where there's a plus side and then click on that to create a new repository, or just click on this button here to say new repository.
And then when it comes up I can simply say git test, and then, again, as a reminder, please, make that a private repository.
Most of these providers allow you to now store private repositories online, so why make them public unless you really want to share it with other people?
I would strongly urge you to keep your repositories private for the moment, unless you are working with a Tee.
I should remind you that at this moment, GitHub supports private repositories only for those subscribers who pay for their GitHub account.
It is not available for subscribers who are using their free account.
Simply click on private, and then Create repository, and then that will create a repository.
And then you would see that GitHub also gives me a bunch of commands here on how to set up the repository.
For creating a new repository on the command line, the commands that we actually had done earlier, or to push an existing repository, the same two kinds of commands that have to be issued.
That basically sets up your GitHub repository to mirror your local repository.
Since I have already linked my repository to Bitbucket, I'm not going to use my GitHub repository for the purpose.
As you noticed, the procedure is pretty much similar on either one of them. Give and take a few differences in the way the information is rendered on the screen in the user interface and a little bit of changes.
More or less, they are similar in debate the way you're going to make use of them in terms of mirroring your local Git repository to the online repository here.
With this, suppose somebody gives you a Git repository, can you make a copy of that on to your local one?
This is where we use another Git command called git clone.
Now here, you see that I have this git test repository.
What I'm going to do is I'm going to go to the suppository, and then copy this URL.
And then I'll show you how I can create a copy of the Git repository or clone this online repository into my local computer.
Let's pretend that I am on a different computer, and then we'll go to our command line, and then create another repository with that same name.
Going to my command line, I'm just going to move up and you'll see that I have my git-test folder there.
I'm going to create another temporary folder here just to show you that I can clone an online Git repository service in my temporary folder.
You see that it is empty.
To review the command, it says git clone and the repository's URL.
Let's apply this command and clone the online Git repository.
Pretending that we are on another computer, so I'm going to say git clone.
And then, Paste the URL of my Bitbucket repository here.
Then you would see that that repository will now get cloned into a local folder of the same name, git-test.
Now, if I do a listing of the directory, you can see the be git-test folder has been created.
Let's go to the git-test folder, and then you will see that this is an exact copy of the folder structure that we had created earlier.
This is how you can clone an online Git repository.
All you need to do is obtain the URL of that Git repository, and then simply use git clone to get a copy of that onto your local computer.
With this, we complete this exercise on using online Git repositories.
So did you finally Git it?
In this exercise you will learn about how to set up and use an online Git repository and synchronize your local Git repository with your online repository. At the end of this exercise, you will be able to:
-
Set up the online repository as a remote repository for your local Git repository
-
Push your commits to the online repository
-
Clone an online Git repository to your computer
-
Then set up an online Git repository named git-test. Note the URL of your online Git repository. Note that private repositories on GitHub requires a paid account, and is not available for free accounts.
- At the prompt, type the following to set up your local repository to link to your online Git repository:
$ git remote add origin <repository URL>
- At the prompt, type the following to push the commits to the online repository:
$ git push -u origin master
- To clone an online repository to your computer, type the following at the prompt:
$ git clone <repository URL>
In this exercise you have learnt to set up an online Git repository, synchronize your local repository with the remote repository, and clone an online repository.
JavaScript which was designed as a scripting language for the browser has seen deployment far beyond the browser.
Node.js has played a significant role in this shift of JavaScript from the browser to the desktop.
Let's now learn a little bit about what Node.js is and what role does NPM, the Node Package Manager, play in the context of Node.js. Node.js, as I mentioned earlier, allows us to bring the power of JavaScript to the desktop.
Node js is based on the JavaScript runtime engine that has been built for the Chrome browser.
The Chrome V8 JavaScript Engine has been ported from the browser to run on the desktop and support the execution of JavaScript programs on the desktop.
Node.js is built around an event-driven, non-blocking I/O model which makes it very efficient to run JavaScript programs on the desktop, asynchronous JavaScript on the desktop. Now this is where Node finds its true polish.
Right now we will examine Node.js in the context its use as a JavaScript runtime.
We will look at the server side application of Node.js in detail in the last course of this specialization.
This is the typical architecture of Node.js.
So in this, the Chrome V8 engine is the bottom layer together with libuv, forms the layer that interacts with the underlying computer system to support the execution of JavaScript programs.
On top of it we have Node Bindings which is also implemented in C++.
At the top layer you have the Node.js and Standard Library, which are all implemented in JavaScript and this is what enables us to write JavaScript programs and run them on the desktop.
Naturally the ability to run JavaScript programs on the desktop energize the web development community to explore using JavaScript to develop a significant number of web development tools.
Tools such as Bower, Grunt, Gulp, Yeoman, and many others.
We will explore some of these in the later part of this course and in subsequent courses.
The last course in the specialization as I mentioned, looks at the use of Node.js on the server side.
How we can develop web server, business logic, all implemented in JavaScript on the server side.
Together with Node you often hear people talking about the Node package manager or NPM. When you install Node on your computer NPM automatically gets installed. The Node package manager is the manager for the Node ecosystem.
It manages all the Node modules and packages that have been made publicly available by many different users.
A typical Node package consist of JavaScript files together with a file called package.json which is the manifest file for this Node module.
We will look at how we can use the package.json file in more detail in the subsequent exercises.
In your browser, head over to nodejs.org and as you browse down, you'll see the download buttons for Node.js for your specific platform.
In this case, it shows the download buttons for MacOS.
Click on the current version of Node.js.
Click on that to download the installer package for your platform.
Once you get hold of the installer package, double click on it to start installing Node.js.
Depending on your operating system, you will see a window like this on your computer and just follow along the instructions to install Node.js on your machine.
You may need administrative privileges to install Node.js on your machine.
Make sure that you are logged in into an administrator account and install Node.js to be accessible by all users that are logged in on the computer.
And once the installation is complete, let's go ahead and verify that Node.js has been installed correctly.
Open up a terminal window or a command window and add the prompt, type node-v to check the version of node installed.
Similarly, check npm-v to check the version of NPM installed. I am starting with these versions of node and NPM, and the subsequent exercises will be based on these.
Even if you install the later version, I'm pretty sure that it would be backward compatible.
All the steps should work pretty much the same.
With this, we complete the installation of Node.js.
Let's go ahead and make use of Node.js in the next exercise.
Note: Make sure you have installed Git on your machine before you install Node.js. Please complete the previous Git installation exercise before proceeding with this exercise.
In this exercise, you will learn to set up the Node.js environment, a popular Javascript based server framework, and node package manager (NPM) on your machine.
To learn more about NodeJS, you can visit https://nodejs.org.
For this course, you just need to install Node.js on your machine and make use of it for running some front-end tools.
You will learn more about the server-side support using Node.js in a subsequent course.
At the end of this exercise, you will be able to:
-
Complete the setup of Node.js and NPM on your machine
-
Verify that the installation was successful and your machine is ready for using Node.js and NPM.
-
To install Node on your machine, go to https://nodejs.org and click on the Download button. Depending on your computer's platform (Windows, MacOS or Linux), the appropriate installation package is downloaded.
-
As an example, on a Mac, you will see the following web page. Click on the Download button. Follow along the instructions to install Node on your machine. (Note: Now Node gives you the option of installing a mature and dependable LTS version and a more newer stable version. You should to install the LTS version. I will use this version in the course.)
Note: On Windows machines, you may need to configure your PATH environmental variable in case you forgot to turn on the add to PATH during the installation steps.
-
Open a terminal window on your machine. If you are using a Windows machine, open a cmd window or PowerShell window with admin privileges.
-
To ensure that your NodeJS setup is working correctly, type the following at the command prompt to check for the version of Node and NPM
$ node -v
$ npm -v
At the end of this exercise, your machine is now ready with the Node installed for further development. We will examine web development tools next.
Now that you have Node.js on your computer, you're obviously wanting to immediately start using it.
In this exercise, we will start using Node.
We will set up a packaged, or adjacent, file for our Git test folder that we have been working with so far.
Then, we will setup a node module called as lite server that will serve up the contents of our get test folder.
And then we can browse this index.html file and other files in a browser.
And we will also see how the lite server will enable us to automatically see updates to our browser window as we make changes to our index.html file, or any other files in our get test folder.
The lite server is something that we're going to extensively use in this and future courses, to be able to see the changes in real time in a browser window as you edit the files of your project.
As I mentioned, we want to set up the package.json file.
What exactly is this package.json file that we're going to setup?
Here, I have some information from the npmjs.org site which specifies what exactly is the role of the package.json file.
The package.json file serves as the documentation on what all other packages that your project is dependent upon.
For example, when you set up the lite server of your project, that will be recorded in the package.json file.
That, subsequently, you can also make use of that package in the future.
Also, it allows you to specify which specific version of a package that your project is dependent on.
Even if the package that you depend on changes in the future, you may insist that you want the user to install only a specific version of the package for use within your node application.
And also, it makes your builds reproducible, which means that when you share your code with others, then they can also do installation of all the node modules, as we will see later in this exercise, on their own computer.
Obviously your next question will be, how do we create this package.json file?
If you are starting a new project where you want to initialize the package.json file, then simply type npm init at the prompt in the project folder.
And then that will take you through a set of steps which will enable you to configure your package.json file.
Let's proceed with that for our Git test project.
Here I am in the git-test folder in my terminal window.
Make sure that you also open a terminal window or a command window and then go to the git-test folder.
And at the prompt, type npm init.
Then follow along the questions that are asked.
For the name of the project, we'll just leave it as the default, git-test.
For version, we'll just leave it as 1.0.0.
We can edit that later. For description, this is a test directory to learn Git and Node.
It doesn't matter, type some description there.
And then the entry point, I would just say index.html.
Usually if it is a node package, the entry point will be index.js.
Now this folder that we have setup is an index.html based folder, so that's why I just typed in index.html.
Test command, nothing. Git repository, if we had already setup the git repository in the previous exercise, it'll automatically prompt that for you, if not, this would be empty and give you an option to type in the git repository URL, in case you're using an online git repository.
Some keywords for your project, which I'm going to leave blank.
Author, type your name.
Let's be narcissistic.
And the license.
And then, it'll show you the configuration of the package.json file in JSON format.
If your family have a JSON, does it look very, very familiar to you.
If this looks all good, let's just say OK and then that results in the creation of the package.json file.
Now if you list the folder contents, you would see the package.json file in the folder contents.
Open that Git test folder in your favorite editor, and then take a look at the contents of package.json file in your editor.
As the next step, we will learn how we can install a node module using NPM, the Node Package Manager.
We're going to install this node module called as light server.
The light server will serve up the contents of this git-test folder in a server that it starts up so that you can view the contents in a browser.
Given that we have an index.html file, if we serve up this folder, then it'll be a website.
And you can view the index.html in a browser.
Let's set up the light server and then we will see how we can make use of the light server to serve up the contents of this folder.
This is very, very useful because if you're working on a web development project, you want to see where live version of your web development project.
That, as you make changes to your project, you can see the changes immediately reflected in the browser.
This is a very good node package that is very useful for this purpose.
Let's set up this light server.
To do that, add the prompt. Type in NPM install.
Notice, if you want NPM to install a node package, this is how you're going to invoke it and then you'd say lite-server.
And then, we also want to save the fact that our project is using the lite server. So we will save this information in the package.json file.
To do that, you're going to type in -- save-dev. Now the save-dev option specifies that this lite server is used for development dependency for our project.
If you are installing a node module on which your project is directly dependent on, then you would install it by simply saying --save option.
Let's go ahead and install it.
And you wait patiently for the installation to take place. It'll take all of a few minutes for that to complete its installation.
Once that is installed, then you would immediately notice when you look at the contents of your folder, you will immediately notice that there is a folder there created named node_modules.
Now, if you go into the node_module, you will see a whole bunch of other subfolders in there, which contain node modules, which are necessary for the likes of our node module and so on.
Let's take a quick tour of the node modules folder to see what the contents of these are.
Going to my git-test folder, if you're going to the node modules folder, you would see, as I said, a whole bunch of subfolders there.
Normally you don't need to be venturing into the node modules folder. They just exist there because they are needed for the [INAUDIBLE].
As you browse through, you should notice a folder named lite-server here.
When you go into the lite-server folder, note in particular the presence of the index.js file and then your package.json file and several other things.
This contents of the folder comprises the lite-server node module.
But this lite-server node module is dependent on other node modules to provide it with some additional functionality.
That's the reason when you install the light server node module, it'll in turn install many other node modules, on which the light server itself is dependent on.
That's the reason why you see that explosion of this folders inside the node modules.
Don't be too concerned about it, the sum total of folders will not be more than a few tens of megabytes.
It is not going to fill up your directory with junk.
This is all essential for node to be able to help you.
In case you're curious about the lite-server and how it works and so on, you can always go down to this GitHub site where the lite-server is hosted.
And then look up the documentation for lite-server.
I will introduce you to whatever you need to know about lite-server as we go through this course and the remaining courses.
You don't need to worry too much about it, but just in case you're curious, you can always go to the site to find out more details about lite-server.
The link is provided in your exercise instructions and additional resources are part of this lesson.
Once you have completed that, then head over to the. Editor where you have the folder, git-test folder, opened and then view the contents o the package.json file.
You would see that the package.json file contains exactly the information that you configured with your NPM.
You would see the name version and repository author and in particular, note this information here.
It says devDependencies, so then it specifies the lite-sever, and also notice it says hat 2.2.2.
Which means that this particular project depends upon lite-server that is a at least version 2.2.2 or higher.
This is very useful for us.
Now why do we need this information here?
Later on, when you go to the other exercises, you will notice that when you store this on an online repository, you don't want to be storing everything in your node modules folder.
You will only be storing information of all the files that we have created.
The node modules folder can always be recreated by typing NPM install at our command prompt.
And then based upon the dev dependencies and dependencies that are listed in the packager file, all the node modules that your project depends on will automatically be installed.
We will see that later on how to use NPM install in this course.
Now that we are at package.json file let's make a couple of edits so that we will be able to make use of the lite-server to serve up that content.
Right here, in this option called scripts, let's add in one more here.
We will say "start".
Start is a command that NPM supports which enables you to specify a bunch of things that will be started.
Later on we will see how we make use of this.
Here I'm going to say "npm run lite". And after that test, I'm going to add in one more entry called "lite", which I will configure as "lite-server", okay?
With these changes, let's save the package.json file. And then, now our project is configured, so that now if you start the lite- server, the contents of your folder will be nowserved up in your favorite browser. Heading back to our command prompt, add the prompt.
If I type, npm start, now you see why I put that entry card start into my package.JSON file.
If I say npm start, whatever the start is configured as in the package.JSON file, we specify that npm run light, and the lite was specified as lite server.
Essentially, we are saying Start the lite-server.
Once I type npm start, it will start the lite-server, and it will serve up the contents of this folder. Now how do you access the contents of this folder?
If you want to accesses this locally, you will access it by specifying the you are as localhost:3000.
These are the default settings for the lite-server.
Furthermore, this should automatically open the browser window of your default browser, and show the contents of index or HTML in the browser window.
Here you can see that I have opened my editor and my browser window directed at localhost:3000 simultaneously side by side, so that we can see how the browser window will immediately reflect any changes that we make to our Git test folder.
Let me go to index.html. And then for the sake of space, I'm going to turn that over.
And then, so here, you can see that this is the contents of this.
And then, now, let me add in one more paragraph.
And save the changes, and then you will immediately notice that the change that I made to my index.html file is reflected into my browser.
This provides a very nice way of being able to observe in real time the changes that you make to your code being reflected into your browser.
When you are working on a project, it'll be very appropriate for you to be able to see the changes immediately.
When you make a change and then save the file, the modified code is immediately loaded into your browser.
You can immediately see the change being reflected in your browser window.
This is a very useful tool while you are doing development of your project.
That is the reason why I introduced you to that lite-server, and set it up so that we can make use of it, as we develop the website in this course.
If you recall, we had already set up our git-test folder to be a Git repository.
Checking again, We will see that we already have three commits in our Git repository.
And this Git repository is already mirrored to our online Git repository which we have set up in the previous exercise either at Bitbucket or GitHub.
My git-test folder is synced to my Bitbuc/ket repository in this particular exercise.
What I'm going to do now is to show you how you can exclude some folders from your project folder, and then make sure that they are not synchronized to your online repository.
Now as I said, the node_modules folder can always be recreated by typing npm install at the prompt.
That's why when you upload the contents of your folder to an online Git repository, or when you do a commit of the folder to your Git repository, you don't want the node_modules folder or all the subfolders under it to be included in the commit.
How do we exclude some folders or some files from our folder from being checked in into our Git repository?
To do that, we will set up a file named .gitignore.
That's the name of the file, .gitignore.
To create this .gitignore file, we will go to our editor.
In the editor, in the git-test folder, I'm going to create a new file and I will name it .gitignore.
Note that the name begins with a dot and then, the rest of the name is g-i-t-i-g-n-o-r-e.
This is very important that you set up the file with exactly that name, .gitignore.
Let's create this file called .gitignore, and the first line of that file, we will type as node_modules.
What this means is that the node_modules folder is going to be excluded from our git commit.
Once I create that .gitignore file and then add node_modules into the .gitignore file, let's save the changes.
And then we will now do a commit of the current state of our project into our Git repository.
I hope you remember your git commands.
Let's do a git status, and then when you do that, you will immediately notice that you have the index.html file marked as modified, and then the two new files, .gitignore and package.json.
We do a git add ., and then do a git status.
And then you see that all this new files have been checked in into your commit.
Let's do a git commit.
$ git commit -m "fourth commit"
And the files are committed.
Let's push the new commit to our online repository. So, to do that git push -u origin master and wait for it to be pushed to our server.
Now, if you go to your online Git repository, you will see that the package.json file and .gitignore would have been checked in into your Git repository.
Going to my Bitbucket repository from the Git test, you will see that when I look at the source, you will see that the package.json file has been added.
The .gitignore has been added and the new index.html file has been checked in.
That completes this exercise.
In this exercise, we have learned how to set up a package.json file using npm init.
We have learned how to install an npm module.
And we have learned how to use the lite-server npm module to serve up the contents of our project folder so that it can be viewed in a browser.
This is a nice way of serving up your web contents, your web application or your website, so that you can see changes in real time being reflected to your browser window.
And then we also saw how we can setup the .gitignore so that some folders can be excluded from being checked into our Git repository.
This completes this exercise.
With this, I'm sure you have gotten a good handle on the use of both Git, and then also node and node modules.
Don't worry, we will be using node extensively, in various ways, as you go through the courses of this specialization.
This is just a start.
In this exercise you will learn the basics of Node and NPM. At the end of this exercise, you will be able to:
-
Set up package.json file in the project folder for configuring your Node and NPM for this project
-
Install a NPM module and make use of it within your project
- At the command prompt in your git-test folder, type
$ npm init
-
Follow along the prompts and answer the questions as follows: accept the default values for most of the entries, except set the entry point to index.html
-
This should create a package.json file in your git-test folder.
Installing an NPM Module
- Install an NPM module, lite-server, that allows you to run a Node.js based development web server and serve up your project files. To do this, type the following at the prompt:
$ npm install lite-server --save-dev
-
You can check out more documentation on lite-server here.
-
Next, open package.json in your editor and modify it as shown below. Note the addition of two lines, line 7 and line 9.
Modify package.json!
{
"name": "git-test",
"version": "1.0.0",
"description": "This is the Git and Node basic learning project",
"main": "index.html",
"scripts": {
"start": "npm run lite",
"test": "echo "Error: no test specified" && exit 1",
"lite": "lite-server"
},
"repository": {
"type": "git",
"url": "git+[https://jogesh_k_muppala@bitbucket.org/jogesh_k_muppala/git-test.git]{.underline}"
},
"author": "",
"license": "ISC",
"homepage": "[https://bitbucket.org/jogesh_k_muppala/git-test#readme]{.underline}",
"devDependencies": {
"lite-server": "^2.2.2"
}
}
- Next, start the development server by typing the following at the prompt:
$ npm start
-
This should open your index.html page in your default browser.
-
If you now open the index.html page in an editor and make changes and save, the browser should immediately refresh to reflect the changes.
- Next, create a file in your project directory named .gitignore (Note: the name starts with a period)Then, add the following to the .gitignore file
node_modules
- Then do a git commit and push the changes to the online repository. You will note that the node_modules folder will not be added to the commit, and will not be uploaded to the repository.
In this exercise you learnt to set up package.json, install a npm package and start a development server.
- 01-Git.pdf (4 slides)
- 01-Git-Exercises.pdf (12 slides)
- 02-NodeJS-NPM.pdf (5 slides)
- 02-Exercises-Node-NPM.pdf (4 slides)
-
Git site git site scm.
-
Installing Git chapter from Pro Git
-
Quick reference guides: GitHub Cheat Sheet (PDF) | Visual Git Cheat Sheet (SVG | PNG)
In this lesson, you will be given a quick overview of front-end UI frameworks, and an introduction to Bootstrap.
The exercises will introduce you to getting started with Bootstrap for your web project.
-
Identify the purpose of using front-end UI frameworks in web design and development.
-
Set up a project with Bootstrap support.
-
Configure a web project to use Bootstrap.
-
Become familiar with the basic features of Bootstrap.
Note: For those of you who are already familiar with Bootstrap 3, here is an overview from the Bootstrap 4 documentation on the major changes in Bootstrap 4 compared to Bootstrap 3.
While you will find Bootstrap 4 to have a lot of overlap in its classes with Bootstrap 3, several breaking changes have been introduced, including removing some components and introducing new components.
This course covers Bootstrap 4 with the assumption that you are not familiar with Bootstrap.
Front-end Web UI Frameworks are becoming their go-to approach for designing and implementing their recent websites.
Let's ask ourselves what exactly are front-end Web UI Frameworks, and learn a little more details about them.
Next, so obviously in this lesson we're going to ask ourselves, what are front-end frameworks?
What do they contain? What are some of the popular front-end UI frameworks?
And why do we need to make use of front-end UI frameworks when we design our websites?
What are front-end web UI frameworks?
Let's take a step backwards, and imagine that you only know HTML, CSS, and JavaScript.
If you were asked to design a new website, you would obviously go about constructing and implementing the entire website, using the technical skills that you have based on your knowledge of HTML, CSS, and JavaScript.
You would often realize that there are many repeated components that you would use on your website.
And you would end up designing your own set of CSS classes. You will be designing JavaScript based component.
And then once you get a group of these together, every time you need to design a new website you would be making use of these predefined sets of CSS classes and JavaScript based components to quickly implement a new website.
Why not take this to its logical conclusion?
How about, if we design an entire framework that consists of ready to use HTML, CSS, and JavaScript placed web UI components.
Here, a front-end web UI framework may define a bunch of CSS classes that will enable us to include components like Buttons, Tables, Navigation bars, Dropdowns, Alerts, Modals, Tabs, Accordions and many more.
And quickly enable us to design and implement a website.
This is what a front-end web UI framework accomplishes.
It is a collection of all these components.
Not only that, it gives you a method of defining consistent typography that you can use for your entire website design.
And enables you to quickly scaffold out a website or the pitch.
If you search for front-end web frameworks, you would find a plethora of them out there in the Internet.
Now several people have done their own service of all these different web UI frameworks, and have published their top ten lists of front-end UI frameworks.
This is one such that you may or may not agree with this ranking, but Bootstrap happens to be the most popular among all the front-end web UI frameworks.
Bootstrap consistently ranks as the number one in many of the lists of front end web UI frameworks.
The remaining among this list may vary, but you would often find Semantic-UI, Foundation by Zerp, Materialize, Material UI, and some of these others appearing in many of those top-end lists.
The next obvious question is, why would you want to use front-end web UI frameworks?
First and foremost, they provide you with a consistent way of designing websites.
And, most of these front-end frameworks support what is called as responsive web design.
We will examine more about responsive web design in the next lesson, but quickly summarizing it, you don't realize that your website may be accessed from various kinds of devices of different screen savers ranging from small mobile phones all the way to up to a full-fledged desktop.
You want to be able to design your website to automatically adapt itself to cater to the size constraints of each of these different devices, from which your website is being accessed.
Responsive web design is concerned about this aspect.
The second issue that most of these Franken frameworks try to address is cross browser compatibility.
If you have played around with browsers as much as I have done, I'm pretty sure you've come to realize that no two browsers render the same website exactly the same way.
When you design a website to render consistently across many different browsers, you are going to be facing an uphill battle.
Now these front-end frameworks have managed to address most of these idiosyncrasies of the different browsers in such a way that you can deliver consistent rendering of your website on different browsers.
That's the second reason why you may want to resort to using a Front-End Web UI framework.
And the third aspect of course is that when you need to design a website, you're always going to be under terrible time pressure.
Increasing your productivity so that you don't waste your energy and time on wasteful configuration issues of those individual components of your website.
Instead, let that be taken care of by a consistently designed front-end web UI framework.
That saves you a lot of time in terms of implementing your website.
They have sacked. And finally, of course, most of these front-end UI frameworks that are all there have their own community.
They are users that use these frameworks for implementing websites.
This community of users will provide you with a very efficient way of being able to solve issues that you may encounter when you're applying anyone of this frameworks for your website design.
Given these different advantages, why would you not want to resort to using a front-end web UI framework?
With this understanding of front-end web UI frameworks, let's now proceed forward to learn more about Bootstrap, the most popular front end web UI framework.
Let me do a quick introduction to Bootstrap before we go on to learn how to make use of Bootstrap in designing our website.
If you go to the Bootstrap webpage, you will see that Bootstrap claims to be the most popular HTML, CSS, and JavaScript based framework that is in use today and specially designed for developing responsive mobile first websites.
Indeed, Bootstrap stands up to its claim as the most popular framework.
It supports a number of CSS classes that enable you to design radius, web components very effectively.
It supports consistent typography to be used on your webpage for rendering content. It supports many different kinds of that components like buttons, tables, navigation bars, modals, images, carousels, and many other, as well as many JavaScript enabled competence.
This enables you to design responsive websites with the mobile first approach.
We will talk more about this in the next lesson.
Bootstrap originated around 2011.
It was created by these two people from Twitter.
Hence, you might often hear people talking about Bootstrap as Twitter Bootstrap.
Mark Otto and Jacob Thornton from Twitter designed Bootstrap for their own internal use and then ended up releasing it for the rest of the web development community to use for consistent website design.
The current production version of Bootstrap is 4.0.
If you had taken my earlier specialization on Coursera, I have dealt with Bootstrap 3.3.7 in the earlier Bootstrap course.
Now, it's time to move on to our first exercise where we will get our hands dirty with Bootstrap.
Strap on your boots, and let's get started with Bootstrap.
I'm sure your fingers are itching to get your hands around Bootstrap.
First step, go to the exercise instructions that follow this exercise in your Bootstrap course page on Coursera.
And then in the instructions, you will see a link to this file Bootstrap4-starter.zip.
Download the zip file to your computer.
Also, the step-by-step instructions that are illustrated in this video will be given in the exercise instructions that follow this video.
There, you will have access to any of the code snippets that you need for this exercise.
This would be the case for all the exercises in the future, too.
Should you need to get hold of the code snippets, that is where you will find them. Once you download the zip file, move that zip file to a convenient location on your computer.
Here, I have moved it to a folder named Coursera on my computer, and then I have the zip file with this long name there.
Just unzip the file.
Once you unzip the file, you will find a folder named Bootstrap4 created in your computer.
Inside the Bootstrap4 folder, you will see another folder named conFusion, there.
Go into the conFusion folder and you would see two files there, index.html and package.json file.
Now, open a command window or a terminal and then move to this folder in your command window or terminal.
At the command prompt, type npm install.
Note that I already have the package.json file in there.
The package.json file is configured so that the lite-server development dependency would be installed if I type npm install.
Once you type npm install, you will see that the lite-server will be installed in your node_modules folder each.
Once this is complete, open this folder in your favorite editor.
Once you have the folder open in your editor, create a .gitignore file and then put node_modules into the gitignore file and save.
This is to ensure that when you do a git commit, the node_modules folder will not be committed.
After that, it is time to go and fetch Bootstrap for use in our project.
Before we fetch Bootstrap, let's do a commit of the current state of the file.
Do git init and initialize your git repository.
Then you can check git status, and you would see that these files need to be committed, add all the files, git commit -m "Initial Setup".
This is the starting point of your folder at this moment.
With this, your starting point of your web project has been now committed to git.
Now you can set up this git to synchronize with an online repository, just like we talked about in the git exercises.
You can set up a repository either on Bitbucket or on Github and then synchronize this project to that git repository.
Our next step is to go and fetch Bootstrap.
To do that, add the prompt type npm install bootstrap@4.0.0 and also --save, and let the Bootstrap be installed.
Once Bootstrap is installed, we realize that we also need to install its peer, which is jQuery as well as Popper.js.
Let's go ahead and install both jQuery and Popper.js into this project folder.
To do that, add the prompt type npm install jquery@3.3.1 and Popper.js@1.12.9 --save.
Now, whenever I install any of the npm packages, I am explicitly specifying the version of the package that you should install.
The reason for this is that I want to make sure that as you go through this exercise, all the steps will work correctly.
I am specifying the exact version of the npm modules to be installed.
Here, we are installing the jQuery version 3.3.1 and Popper.js version 1.12.9.
Subsequently, also, I will specify the exact versions of the modules to be installed. So let's go ahead and install these.
And once they are installed, we can go to the next step.
Going back to our project folder, you would see that if you go into node_modules, you will see a folder in there named Bootstrap.
And inside the folder named Bootstrap, you'll find a folder named dist.
Inside dist folder, you'll find two sub-folders named CSS and js.
If you go into the CSS folder, you'll find a whole bunch of precompiled CSS files here.
The one that is of interest to us at the start is Bootstrap min.css.
That's the file that we are going to include into our index.html file in order to make use of Bootstrap in our project.
Similarly, going to the js folder, you would see that there is a Bootstrap min.js file.
We're going to include that also into our index.htm.
That'll be the next step that you will see me doing.
Before we go to the next step, let's start up our lite-server so that we can see the changes that we make to the index.html immediately reflected into our web page in real time.
Let's start up lite-servers.
Type the prompt type npm start, and then that should start up your lite-server.
You can now see, on the screen, my editor on the left and the current version of the index.html page on the right.
As you can see, I have already configured the index.html page with some content.
This web page looks like the typical web page of a computer science professor.
Let's now open the index.html page in our editor.
And then in the head part of the index.html page, right before the title, I'm going to paste in a little bit of code.
This code snippet is given to you in the instructions.
You can simply copy and paste this code snippet, and I'll walk you through what this code snippet is trying to do.
You will notice that I have three meta tags here.
The first one says charset="utf-8".
This is the unicode that is going to be used. The second line which says meta name="viewport",
I'm going to come back and explain this particular line to you in the next lesson when we will look at responsive web design.
Now, let me draw your attention to this particular line which says link rel="stylesheet", and then href. Note that I am specifying href as "node_modules/bootstrap/dist/css/bootstrap.min.css".
What I am specifying is that the bootstrap.min.css file, which contains the CSS classes corresponding to Bootstrap that we have downloaded using NPM to our node_modules folder, I'm going to include that into the head of my index.html page.
You need to include the CSS classes provided by Bootstrap.
You also need to include the JavaScript classes provided by Bootstrap, which we're going to do at the bottom of this page.
Going to the bottom of this page, note, just before the closing body tag, I'm going to paste in the code to include all the scripts there.
To do that, I just paste in the three lines for the script to include the jQuery, Popper.js, and also the Bootstrap min.js.
And note the order in which I have included this. So the Bootstrap is at the bottom.
Then, since Bootstrap is dependent upon both jQuery and Popper in that order, so I will first input jQuery. And then after that, we input Popper, and then finally, Bootstrap min.js at the bottom of the index.html file.
Now, this is included at the bottom of the page.
Because when you are loading the page from a web server, you want the CSS classes to be loaded immediately so that as the page starts rendering, when the JavaScript is fetched, the JavaScript needs to execute in order to make changes to your page with the JavaScript code, and that will take a little bit of time.
You don't want the user to be waiting for the entire page to be loaded before they see something in their browser window.
That's why we normally load the JavaScript classes towards the end of our html page just before the body tech.
After making these changes, let's save the file.
Now, the reason why I am showing the index.html file in my editor and also the browser right next to it is, the moment you save the changes that you have made to the index.html file, note how the browser rendering of that file immediately updates and see Bootstrap already in action on the page.
Right now, you'll see that your page is using Times New Roman to render all the content.
The moment I save the web page, you notice that the fonts being used on your web page have changed.
Now, your web page is set up to make use of the Bootstrap classes, and it is using Bootstraps default typography to render all the content.
Bootstrap by default uses Helvetica Neue for the font.
You can change the default font for bootstrap and so on, but that will be beyond the scope of our discussion right now.
Once you set up your index.html page and save it, you will immediately see Bootstrap coming into action in our web page.
This is how I'm going to keep illustrating, as we add various bootstraps, CSS classes, and components to our web page, how the rendering of it in our browser will keep changing.
Now, obviously, the rendering of the page in our browser is still terrible.
It's better than the typical computer science professors web page, but definitely not readable.
We need to now bring into action the various CSS classes and the JavaScript components that our Bootstrap web UI framework provides in order to design our web page.
We will do that step by step as we go through this exercise.
This may be a convenient time for you to do a git commit of the changes that you have made so that at the end of this exercise, your state of your project folder will be saved to your git repository.
Going to my conFusion folder in another tab of my terminal window, if I type git status, I now see that my index.html file and the package of JSON file have been modified.
I'm going to do a commit.
Now, my status of the folder at the end of this exercise has been committed to my git repository.
You can synchronize that with your online repository so that the state of your project will be saved at this point.
With this, we complete our first Bootstrap exercise. You have now seen how we can configure Bootstrap to be used in our web project.
As we proceed to the next few exercises, we're going to employee the Bootstrap classes to design our web pages.
Bootstrap4-starter.zip
This exercise introduces the first set of steps to set up your web page to make use of Bootstrap classes and components. At the end of this exercise, you will be able to:
-
Download Bootstrap using NPM and include it in your project
-
Understand how to set up a web project to use Bootstrap
-
Include the Bootstrap CSS and JS classes into a web page
Note: Please remember to retain the folder and all the files that you create in this exercise. Further exercises will build upon the files that you create in this exercise. DO NOT DELETE the files at the end of the exercise.
-
Go to a convenient folder location on your computer and download the Bootstrap4-starter.zip file using the link provided at the top of this page.
-
Unzip the file to see a folder named Bootstrap4 and a sub-folder under it named conFusion created. Move to the conFusion folder.
-
Open a cmd window/terminal and move to the conFusion folder.
-
At the prompt type
$ npm install
-
This will install the lite-server node module to your project.
-
Next, initialize a Git repository in the project folder, and then set up a .gitignore file with the contents as shown below:
-
Now do a commit of your project folder to the Git repository with the message "Initial Setup". You will be doing a commit of your project at the end of each exercise so that you retain the completed files of each exercise.
-
Set up an online Git repository and synchronize your project folder with the online repository.
- You will use npm to fetch the Bootstrap files for use within your project. Thereafter you need to install JQuery and Popper.js as shown below since Bootstrap 4 depends on these two. At the prompt, type the following to fetch Bootstrap files to your project folder:
$ npm install bootstrap@4.0.0 --save
$ npm install jquery@3.3.1 popper.js@1.12.9 --save
-
This will fetch the Bootstrap files and store is in your node_modules folder in a bootstrap folder. The bootstrap->dist folder contains the precompiled Bootstrap CSS and JS files for use within your project.
-
Open your project folder in your editor, and then open the index.html file in the conFusion folder. This is your starting web page for the project. We have already created the web page with some content to get you started. We will use Bootstrap to style this web page, and learn Bootstrap features, classes and components along the way.
-
Start your lite-server by typing npm start at the prompt. The index.html file should now be loaded into your default browser.
-
Open the index.html file in your favourite text editor. If you are using Visual Studio Code, Brackets, Sublime Text or similar editors, you can open the project folder in the editor and then view index.html.
-
Insert the following code in the <head> of index.html file before the title.
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
-
This will include Bootstrap CSS into your web page. Note the subtle change in the fonts of the content of the web page. This is the Bootstrap typography effect coming into play. The default Bootstrap typography sets the font to Helvetica Neue and selects the appropriate font size based on the choice of the heading style and paragraph style for the content.
-
At the bottom of the page, just before the end of the body tag, add the following code to include the JQuery library, popper.js library and Bootstrap's Javascript plugins. Bootstrap by default uses the JQuery Javascript library for its Javascript plugins. Hence the need to include JQuery library in the web page.
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
- Now, do a Git commit with the message "Intro. to Bootstrap". You may push the commit to your online repository.
We have now understood how to set up a web project to use Bootstrap. In the next lecture, we will explore further on responsive design and Bootstrap's grid system.
- (required for the exercise)
Bootstrap4-starter.zip
In this lesson, you will be given an overview of responsive web design and an introduction to the Bootstrap grid system. The exercises will concentrate on enhancing your web project using the Bootstrap grid in order to make it responsive.
At the end of this lesson, you will be able to:
-
Understand the reasons for using responsive web design in a web project
-
Use the Bootstrap grid system to design responsive websites
-
Add your own custom CSS classes to a Bootstrap based web project
These days in web development world, we often hear people mentioning the terms responsive design and mobile first approach.
Let's try and understand what is meant by these terms, and how they affect the way you design your websites and your web applications.
Your obvious question is going to be why consider responsive design?
To help us understand this, let's consider how people access websites these days?
Traditionally, when websites were first designed, you could pretty much assume that people will be browsing your websites from a computer.
These days your websites could be visited from a smartphone, a tablet or a computer with different screen sizes and screen resolutions.
How do we render our websites consistently on devices of different screen sizes?
The one size fits all approach that traditional website designers have taken no longer fixed bill.
We need a better approach, an approach that will automatically adapt your website to the size of the screen on which it is being viewed.
This is where we have to take an approach to adapt to the user's view port.
This has to be built into your website design and development so that it will automatically adapt to the viewport of the user's device.
To help you better appreciate the need for addressing devices of different screen sizes.
I am taking the help of the developer options that might Safari browser provides that enables me to view the website with screens of different sizes.
That hopefully will convince of you of why we made responsive web design.
Here you see that Coursera website being rendered on a 1920 by 1080 screen sites.
This would be a typical large desktop or a high resolution laptop screen.
Then let's consider the same website being viewed using a smaller screen such.
You see automatically your screen layout is slightly adjusting to the size of the viewport of your device, same thing at 800 by 600.
Let's go down in screen sizes, this is an iPad close view of the same site.
This is an iPad Air 2 size, this is an iPad Mini 4 size, note the transition from an iPad Mini 4 size to an iPhone 6S Plus in portrait mode.
You'll now notice that the Navigation Bot has now collapsed into a button here, which when you click will reveal the options from your Navigation Bash.
And let's look at the same thing in our iPhone 6S in landscape mode, note how the screen adopts itself.
Similarly for an iPhone 6S in landscape mode and go down to an iPhone SE, and you see how the website has change the way it is being rendered.
Hopefully, this example has illustrated to you how and why we need responsive web design.
The second related concept that you will hear is mobile first.
The mobile first approach instead looks at designing a website for a mobile device first.
Consider how you would satisfy the screen constraints of your mobile device. And then as your screen size expands, you would automatically start an app to your website to the larger and larger screen sizes.
Perhaps, you're willing more and more of the content.
To take advantage of the increasing screen real estate.
The same website when seeing on a mobile device might have only parts of the information being revealed to the user.
But then when rendered on a full fledge desktop it might show a lot more detail version of the website.
Now this has to be automatically adapted based upon the information that you get from the device from which your website is being viewed.
How do we get this information?
Fortunately, doing responsive web design is supported by many of the modern front end web UI frameworks including Bootstrap.
When we look at Bootstrap's definition on it's webpage it says, responsive mobile first approach.
Yeah, how do we go by doing responsive web design?
There are several concepts that are built in to your frame time web UI frameworks that come to the aid when you need to do responsive web design.
First and foremost is what is called is a Grid system?
We're going to look at the Bootstrap's Grid system in more detail in the next lecture.
That we'll understand exactly how we can leverage that to be able to do responsive web design.
The second aspect is fluid images, so that your images that you include in your website will automatically adapt itself to the screen size.
And the third part is what is called a CSS media queries from your CSS code.
You can query the size of the media and then appropriately adjust your CSS classes to fit the size of the device's screen.
Now how do media queries work?
Let's look at that next.
Media queries are supported in CSS like this.
The technology allows you to do a media query to specify the minimum width of the screen under which this particular set of CSS classes will be active.
This would be specified in your CSS file as @media, and then within bracket, you specify for example, min-width.
There are a lot more options to the media queries than what I'm showing here.
This is just one example of how you would build a media query in your CSS code.
Taking a look at Bootstrap's CSS code itself, let's go in and see how media queries are being used by Bootstrap.
Here you see an example of a media query where it says, @media and min-width 576 pixels.
And then it specifies that those particular CSS class call container, which we will learn more about in the next lecture, and also in the exercise that follows.
We will see that the container's width is set based upon the width of the screen.
Similarly, for a higher width screen, the container width is automatically adjusted.
This is what enables your web UI framework to support responsive web design.
Doing media queries, your web UI framework is able to establish what kind of device you're rendering your website on.
And correspondingly adjust the CSS classes to fit that particular devices screen size.
Then obviously, the next question that is going to come in your mind is how do we do this in practice?
Fortunately, if you start with a well-designed front end web UI framework like Bootstrap, things become very straightforward.
We will learn more about this in the next lecture and the exercise that follows.
In the previous lecture, we learnt about responsive design.
We also briefly mentioned that the Bootstrap grid system is designed for supporting responsive websites.
How does Bootstraps grid support this?
And what exactly does Bootstrap grid involve, that enables us to design responsive websites?
Let's talk a bit more detail about the Bootstrap grid system, and how it supports responsiveness next.
We saw the use of the viewport meta tag in the previous lesson, when we did the initial exercise on setting up Bootstrap in our index.html page.
I briefly referred to this particular line in the code then.
Let's try to understand why we use this in our index.html page.
What we are specifying here is that, when our web page is being rendered by the browser in a particular device, then, their rendering in the browser will take into account the size of the screen and automatically adapt the rendering of the page to the devices screen width.
That way, when we have responsive classes,
CSS classes built into our UI framework, then that will ensure that our web page is correctly rendered for that particular screen size.
This is where the Bootstrap grid system comes to our rescue and enables us to design responsive websites.
Again, emphasizing this point, Bootstrap grid is designed to be responsive.
You have already seen what this means in the previous lecture, and mobile first, which we have already discussed in the previous lecture and then fluid, automatically adapting to the screen width.
The Bootstrap grid takes advantage of the CSS flexbox layout.
The CSS flexbox layout which is being supported by the more recent versions of the various browsers, enables a lot more simpler and flexible layout options in CSS.
Now, the actual discussion of how CSS flexbox layout works is beyond the scope of this course, we will restrict ourselves to how CSS flexbox is being leveraged by Bootstrap for its grid system.
Earlier Bootstrap had its own grid system which was predating the CSS flexbox layout, but the latest version of Bootstrap has made the CSS flexbox layout as the standard for the Bootstrap grid.
This flexbox layout can easily handle dynamic content and can adapt the containers to the dynamic content, and also can easily adapt to unknown size of the actual content enclosed inside the containers.
The flexbox layout also supports direction-agnostic layout.
What the flexbox layout brings to the Bootstrap grids is the ability to do easy vertical alignment of the content within a parent element.
We'll see the use of this in the exercise that follows.
Also, it allows easy reordering of the content across different devices and screen resolutions with the help of media queries.
Again we'll see a little bit of that in the exercise on how Bootstrap leverages that to support interesting ways of laying out content.
Also, that content itself, the content containers can also be designed to be equal height columns so that the content container with the largest height determines the height of all the remaining containers that are laid out in the same row.
Let's now talk a little more details about the Bootstrap grid and how it actually works.
The way the Bootstrap grid works, is by applying a container class to the outermost layer.
We might use a div for defining the element for which we apply the container class in general.
The container is the outermost unit within which the actual content is laid out.
Bootstrap supports both the container class which is a fixed width layout, which means that the content itself is restricted to a fixed width on the screen.
This container class enables this fixed width to automatically adapt itself to the size of the screen by using media queries so that is where the responsive design comes into our rescue.
Later on, we will see how this container will adjust to different screen sizes. Now, we also have the flexibility of using in other classical container fluid which enables the container to automatically adapt to the size of the screen.
But the fixed width container, fixes the size of the actual layout width.
Inside the container, the content will be laid out in the form of rows, so typically what we would do is inside and out of div to which we apply the container class, we'll include an inner div to which we will apply the row class.
The content itself will be vertically divided into multiple rows.
And once this is divided into rows, within each row, you can then layout the content using columns.
Each row in Bootstrap, will be divided into 12 equal sized columns.
Now, you can design your content to occupy any number of these 12 columns.
And the fact that the content itself adapts to the screen width and the row itself being enclosed inside the container will automatically adapt to the screen width, and also the columns, the 12 columns will be determined.
Their widths will be determined by the row by itself.
Which means that for a different screen sizes, whatever content you layout all of those 12 columns will automatically adjust itself to the width that is allowed for the content.
This is how the responsiveness is built into the Bootstrap grid way of laying out the content.
How exactly do we layout the content?
We'll talk about that in the next few slides.
The Bootstrap grid itself, makes available to us five classes to specify different screen sizes by default.
There is a default class which targets all screen sizes, starting from extra small to extra-large.
The entire range of screen widths in Bootstrap terms, is divided into extra small, small, medium, large, and extra-large screen sizes.
Then look at how these different classes of screen sizes are determined in detail in one of the later slides.
Within your code, you will identify the layout specification by specifying sm for the small screen size, md for medium, lg for large, and xl for extra large screen sizes.
When you do the layout, as we saw in the previous slide, every row in a Bootstrap grid system is divided into 12 columns.
Now, we will layout content using what is called as the column classes.
For the column classes, we can specify how the layout is done for different screen widths.
Look at the details of this in the subsequent slides later.
But let me quickly draw your attention to how we specify the column sizes.
They might specify the column sizes as col, which is one of the classes they will say col-sm for small and col-md for medium and large and extra-large and so on.
Now, these column classes are used to specify exactly how many columns in a row will each piece of content occupy.
How does this work?
We'll see that in the next slide.
Going back to our Bootstrap Grid, suppose we have a piece of content and we want to lay out the peace of content.
We can specify that that content is enclosed inside another div, to which we apply column class, like for example, col-sm-5.
In that case, what we are specifying is that for small to extra-large screen sizes, this piece of content will occupy five columns out of those 12 columns.
Now, you are going to immediately ask me, what about the extra smocking?
If it is not explicitly specified for the extra smarted lockette by the entire breadth of the 12 columns, they can explicitly specify from which range to which range the column layout will occupy how many of the columns.
In this particular case, when I specify I only call them sm-5, what I mean is that this particular content that is enclosed inside those div, will occupy five columns for all screen sizes, from small all the way to extra-large.
Now, we now see that out of the 12 columns, we have already occupied five columns.
There are still seven more columns left.
I could take another piece of content and then position it to the right of this, by defending another div and then applying column sm-7.
In this case, you see that 5 plus 7 is equal to 12.
These two pieces of content that are enclosed in the two divs, will now be positioned side by side, and the sum total of them is occupying the entire 12 column width.
This is how we can specify and the work with the 12 columns in defining the layout of the current tier.
With the use of the CSS flex box layout, Bootstrap also supports what is called the Auto-layout Columns.
In this case, I can simply specify column sm without specifying how many columns it is supposed to occupy.
In case I specify three Doobs width column sm in my heml 5, then the bootstrap grid will automatically position these contents inside those divs, side by side, so, that each one of them gets one third of the total width.
Since we have 12 columns here, each of these three will get four columns each.
And this is automatically taken care of by the bootstraps layout mechanism.
Now, we can explicitly specify the number of columns a particular piece of content occupy.
For example, suppose I specify three column classes, but the middle one I specify column sm 6.
Then what happens is, when bootstrap does the layout, the middle one will occupy six columns, and then the left and the right pieces of content will occupy whatever is left off.
Out of the 12 columns that we have, if 6 columns that occupied by the middle piece of content, then we have left with us 6 more columns and that will be equally divided between the contents and the two sides of this middle column.
Each of them will get free columns of space each.
That is how the layout is automatically done with Bootstrap.
In the exercise, we will see various combinations of use of these kind of specifications of how many columns each piece of content will occupy in color layout.
This table summarizes the way Bootstrap treats the different screen grids and correspondingly how you identify these screen grids.
As I specified earlier, Bootstrap divides the entire screen width range into 5 classes.
The extra small screens are those whose grids are below 776 pixels.
Small screens are those that are between 576 and below 768 pixels.
Medium screens from 768 to 992, large from 992 to 1200 and anything about 1200 pixels width is treated to be an extra-large screen.
This is how the default Bootstrap Grid is configured.
Now, once you get comfortable with Bootstrap, you can also configure these divisions yourself.
But for this course, we're going to stay with the default configuration that bootstrap supports.
Now, the grid behavior in this case, is that whatever is laid out for extra small, will be horizontal at all times, for the higher bits they'll be collapsed to start width, but horizontal about the break points.
We'll see how this works in a short while with some examples.
Now, we saw the use of the container in the previous slide.
For extra small screens, the container width is automatically determined by the screen width.
But for small, medium, large and extra-large, the container width is as specified.
If you use the div with a class container, then for small screens it is 540 pixels.
You'll notice that if you have a screen width between 576 to 768, your content will be laid out in 540 pixels, will be centered in the screen width.
The leftover space will be left as margins on either side of this content.
Similarly, for medium it is 720 pixels and so on.
Now, then you specify how many columns each content occupies.
Then the column class prefixes that you will use is.col for extra small,.col-sm for small, all the way to extra-large.
If you specify something with.col-md, then that applies for medium to extra-large screens.
Whenever you specify any col- and some numbers, then that applies to that particular screen size and everything about that screen size.
Now, in all screen size cases, the number of columns is defined to be 12 columns.
The grid in case of bootstrap is designed to be 12 columns and that is configurable, but the default value is 12 columns.
The reason for choosing 12 is that 12 is a good multiple of two, three, four and so on.
It gives you a lot of flexibility in terms of how many columns you choose to lay out your content.
Between each column, so if you lay out two pieces of content side by side with their divs, between these two pieces of content they'll be a small gutter that will be left.
Empty white space that'll be left off width the gutter width, which is just 30 pixels by default.
15 pixels is from one piece of content and 15 pixels from other piece of content.
Sum total together 30 pixels of white space will be left between the two pieces of content.
Think about how a newspaper column layout is done and you begin to see the correspondence between the newspaper column layout is done and how the bootstrap's grid does the layout of the content on that pitch.
Bootstrap's grid allows you to do nest level content, so you can enclose content inside content and then do nested content layout.
Also, it supports offsets.
We will see the use of offsets also in some examples later.
Let's look at our first example of how you would apply bootstraps column classes, and how they would actually be rendered on different screen sizes.
Here is an example of a situation where I applied to the two divs, column hyphen 12 and then column hyphen sm hyphen five for the red piece of content and for the other one I applied column hyphen 12 and column sm seven.
The way this content will be laid out is for extra small screens, the two pieces of content will be stacked one on top of the other.
The red one will be stacked on top of the sea green colored one.
But for small to extra-large screens, the two pieces of content will be laid out side by side.
The reason for this is because we said column sm five and column sm seven for the two.
For small to extra-large they're laid out side by side so that the red content will occupy the leftmost five columns and the sea green content will occupy the right seven columns of your row, all the way from small to extra-large screen sizes.
This is how we would specify content layout for different screen sizes.
Bootstrap also provides additional classes called as the Order Hyphen Classes which allow you to reorder the content on the screen.
For example, if you apply an order sm first, an order some last class to the divs, as is shown in the example here, in this case, the div for which you apply order sm last will be pushed to the right side of the screen and order sm first div will be pushed to the left side of the screen.
Applying these order classes allows you to reorder the content on the script.
Not only this, the order sm also allows you to specify same order sm one to order sm 12 to specify the order in which the content needs to be rendered on the screen.
Using a larger number, you could shift the content to the right side of the row and a smaller number will shift the content to the left side of the row.
We will see an example of this also in the exercise.
The next interesting support that Bootstrap Grid brings with the use of the Flexbox layout is vertical alignment of content.
The earlier Bootstrap versions, like Bootstrap 3 and earlier, did not have the ability to do vertical alignment of content.
With the use of the Flexbox for designing the Bootstrap Grid in Bootstrap four, we get the flexibility that CSS Flexbox brings in terms of doing vertical alignment.
If you wanted the content to be vertically-centered, then to the row, you would apply the class called "align items center".
In this case, whatever content is laid out, will be laid out vertically-aligned within that particular row.
The content which occupies the largest height will be the one to which the remaining ones will be aligned when it is laid out in that row or if you pre-specify the height of the row, then all the content will be centered vertically within that particular row there.
Not only that, Bootstrap's Grid also supports horizontal alignment of content.
Let's look at an example.
If you specify your content like this.
Say, you have three columns and the first one you specify div class column three, then the middle one you'll say div class column auto. I'm going to come back to that column auto in a short while.
And the right one says div class column 3. So in this case, what we are specifying is that the left and the rightmost pieces of content will occupy three columns each.
The middle one, when I say, "column auto", it means that the number of columns that this particular div occupies will be automatically determined by the content that is enclosed inside there.
Based upon the content, the number of columns occupied by the div will automatically adjust itself.
In this particular case, in this layout, that particular content is being accommodated within four columns.
Now you have four columns being used by the center div, three columns by the left and three columns by the right.
Sum total, you have 10 columns.
You have two columns that are left empty.
Now, if you specify for the row, you specify justify content center, then, the entire content in this particular row will be centered with respect to the row horizontal.
You can also have the content left-justified, right-justified and a couple of other options.
Details are in the bootstraps documentation.
Bootstrap also allows you to do column offsets.
How does this work?
Let's look at an example.
In this column offset, we can specify a piece of content, add to that if we apply the class as offset hyphen sm hyphen one.
What we are specifying is for small to extra-large screens, this piece of content should be right-shifted by one column.
When this content is laid out, as you can see, the leftmost one column is left blank and the content is shifted right by one column.
And you can lay out the remaining content on the right side.
sum total, you can see that the two divs will occupy 11 columns but one column offset to the right.
That is how we can control the layout of the content using a column offset.
As you can see, using the column size specifications, the vertical and horizontal alignment, the offset, the push and the pull, and flex first and flex last, we are able to get a lot of control on how we lay out contents for different screen widths and different screen sizes.
Bootstrap goes even further by allowing you to nest content inside divs.
For example, if you specify two divs, as you see with column sm five and column sm seven, the two contents will be laid out as seen here.
Now, inside the right div, I can again go in and divide that div's width into a row and then that row will automatically give me another 12 columns for that part of the screen and then I can then do the layout using nesting of the divs and do the layout for different parts of that column.
Nesting like this, brings you even more flexibility in the way you lay out content in your pitch.
With all the discussion about the Bootstrap Grid System and how the Bootstrap Grid supports various ways of laying out content, we're going to now, move on to our next set of exercises.
We're going to apply the Bootstrap grid to our index.html page in order to do the layout of the content inside or index.html page.
We will also use some custom CSS classes.
In the previous lectures, we have learnt about responsive design and the bootstrap grid system.
We have seen how the bootstrap grid allows us to design responsive websites. It's time for us to move onto the next exercise.
We'll begin to work with the index html page that we created in our previous exercise and apply the bootstrap grid classes to make it responsive.
Taking a quick look at our web page in the browser we see that it is still terrible although the fonts have improved a little bit, and we are now using the bootstraps default fonts.
Let's now try and apply the bootstrap grid classes to index.html to improve its layout.
Going to the index.html page, let me quickly draw your attention to this particular line in the index.html page that we included already in the previous exercise. I had referred to this line, then we were talking about the bootstrap grid system.
Here, we see that we've specified the meta tags with a view port and the content, width as device width, and initial scale one and shrink to fit no.
This meta tag allows us to make our web page responsive by looking at the view port character.
Moving ahead to the next step.
We're going to roll down to the body of this index.html page, and then look up the first div that comes right below the header tag there, to this div you're going to apply the class container.
We have already learnt about the container class in the previous lecture.
Once we apply the container class, then taking a look at our web page we see that part of the content right there has already adapted itself.
Look at the difference between the content up here and the one below here.
Now this content down below here, is in the footer of our index.html page and this content is in the header.
But that content on the middle is the actual content of our web page, that is inside the div to which we apply the container.
Applying the container class you can immediately see that the width of the page within which our content is laid out has now shrunk and then you have some extra space left on either side, so with this container width being a fixed size container, our content will be fixed to this particular width on the screen leaving enough margin on either side as white space.
Let's apply the same container class to both the header and the footer also, and then see how the content changes.
Going back to our web page, what I'm going to do now is for the inner content here, the inner div inside the container, I'm going to apply the class as the row class here, to this first one, and I'm going to simply copy this.
I'm going to apply the same to the second div here which is lined up for the div, and also scroll down and then to the third div here, I'm also applying the row class here.
Now, the content inside this outermost container class, is now divided into three rows, so whatever is inside here will be one row, whatever is inside here, will be the second row and the one in here will be the third row.
We'll later on apply the column classes to this.
Let us now move to the header in our index.html's body. And to the header, I'm going to apply a class called as jumbotron.
The jumbotron component allows you to set apart the content inside the jumbotron from the rest of the page.
We will see the result in a short while when we at the resulting web page.
Now, to the div inside this header, I'm going to apply the class as container, so that whatever is inside the content will be now constrained by the container width there.
Similarly, moving down to the footer here, in the footer also, the first div inside the footer, I'm going to apply the class as container.
And the div inside there, I'm going to apply the class as row there, to the div inside there.
This div will take us all the way to this particular div here. And then the next div also that is right below that, I will apply the class as row.
Now my footer contains two rows here, we'll style the content using column, classes in a short while.
Going to the header also, I will apply the row class to the second div inside the container div here. So this div which matches I've got this, will be one single row in the header.
Let's take a look at our resulting web page.
Going to our web page, you can now see that the header content is now set apart from the rest inside this grey box on top here.
But the content itself is now lined up with the content down below here.
Now, this is the result of using the container.
Moving to the footer, you can now see that the footer content is also now lined up inside the container.
But the page still looks not that great, we'll now apply the column classes to the inner divs now.
Going back to the index.html page, we'll now start applying the column classes.
Going to the header, to the second inner div inside the jumbotron here, let me apply a class as column 12, column sm-6.
Here the content in this first div will occupy the entire row for extra small screen sizes, and then will occupy half the row so that's why column sm-6 for small to extra-large screen sizes.
Now, similarly for the second div here, although it doesn't contain any content there, I'm going to define the column classes here as column 12 and then column sm.
Notice that here by specifying column 12, I'm explicitly stating that for extra small screen sizes whatever content is inside this div will be stacked below the content about here.
And then for small to extra-large screen sizes, this content will occupy the leftover amount of columns in the row for small to extra-large screen sizes.
Here in this case since six columns are occupied by this content, this will get the remaining six columns there.
Moving down to the content rows here, for the content here, so for this first content, which is a label here, I'm going to apply the classes as column 12, column sm-4, column md-3.
Stating that for extra small screen sizes, this will occupy the entire row, for small, it will occupy full columns, and then for medium to extra-large, it will occupy three columns in the row.
Now, so the remaining part will be occupied by the content down below here, so to that, I will apply the classes as col, indicating that this will be stacked below the content here in the extra small screen sizes, and then I'll say column sm, so which means that this will occupy the remaining eight columns here, because four columns is taken up by this one, and then we'll say column md, which means that this will occupy the remaining nine columns because three columns are taken up for medium to extra-large screen sizes by the content above here.
Now that I have defined for the first content row, I'm going to take the same column class application here, and then apply that to the second row here, and also the third content row here.
Similarly, I'm going to copy this one and then apply the same to the content divs down below here.
Now we have configured both the header and the content columns there.
Let's now move down to the footer. In the footer, you'll notice that this div contains three inner divs here, so for each of these three inner divs here, I'm going to apply the corresponding column classes.
For the first one, which contains links to the various pages that will form part of this website, I'm going to apply a column class, as column four, column sm-2 here.
Meaning that for extra small screen sizes, this will occupy four columns and for small to extra-large, it will occupy just two columns here.
Then for the second one, the second div in there I will apply the classes as column seven.
Notice that I have four here and then seven here, so that total occupies 11 columns.
I have left one column empty. I'll come back later to apply an offset to take care of the extra column.
This is column seven, and then col-sm-5 to the second one.
This is two plus five, seven.
I still have five columns left over, which I can use for the third div here.
Now for extra small screen sizes, these two contents will be positioned side by side, and then this div which contains links to a social media site will be in a separate row stacked below.
But for small to extra-large screen sizes, the first one will occupy two columns, the second will occupy five and the remaining will be taken up by social media links here.
For the third one, I'm going to apply the class as col-12 col-sm-4 here.
So col-12 col-sm-4, meaning that this will occupy a separate set of 12 columns stacked below the previous content for extra small screen sizes, but for small to extra-large it will occupy four columns.
Here we are four plus five, nine plus two 11.
One column is still leftover for small to extra-large.
That's how I'm going to apply that column closest to this.
Now, we still have the one below here where we contain the copyrights to this.
I'm going to apply the class as column auto, meaning that this content will occupy just enough columns as is required by the content there.
Later on you will see that I will position this content in the center of the screen thereby using yet another bootstrap CSS class. We'll come to that in the next exercise.
With this we have applied various column classes to the header, the content, and the footer.
This is a good time for us to save the changes and then go and take a look at the updated indexed or HTML page.
Taking a look at our index.html page, you'll notice how in the header which is the Jumbotron, the content is now occupying just half of the screen there.
The other half of the screen of this particular row is now left empty.
Coming down to the content rows, you see that the label on the left side occupying three or four columns depending upon which screen size were using, and the remaining being occupied by the rest of the content.
Here we have one row, the second row, and the third row.
And then the footer here you can see that the links are on the left side, the others in the middle, and then the social media links on the right side.
This is for a medium sized screen.
Now if you want to look at the same view for an extra small or small screen sizes, if you're using Chrome, then Chrome has the developer tools that you can turn on by clicking on the view developer tools, and when the developer tools come up, you will notice, let me reduce the size here.
You will notice this small to windows there.
Clicking on that will turn on the responsive view for these sites there.
You can see that in here the view of this same web page on a pixel to site, which is 411 by 731 in portrait mode, so which is corresponding to an extra small screen size, so you can see how the content is laid out.
You can see the Jumbotron content there and then the remaining part of the content down below here.
And then down to the footer.
In the footer you can see how the links and ad does have laid out side by side. Now reducing the screen size so that we can see how that footer is laid out here.
The remaining part, you have the links on the left side, you have the address on the right side, and then the social media links down below in a separate row here, and then the copyright at the bottom there.
This is the interesting view that we see for extra small screen sizes.
Getting back to our code here, I'm going to now apply the order and offset classes to this content in order to display the content in a slightly different manner.
Going to the content row here, for the two divs here which contain the content, I'm going to apply the classes as order-sm-last for the first row here.
And then for that one down below here I will apply order sm first to the row down here.
Which means that when this content is displayed, this content will be pulled to the left side of the screen and then this column will be pushed to the right side of the screen.
This will be ordered to the right side and this will be ordered to the left side.
As I explained about the order clauses in the previous lecture.
Similarly from the second row, I'm going to leave it as such but from the third row I'm going to apply the same set of order classes.
I'm going to go to the third row here, and then apply the order-sm-last to this one, and then I will apply the order-sm-first to this one.
And so this one again will be reordered such that this content will appear to the left side and this content will appear to the right side.
This is just a way of positioning the content in a bit more interesting way.
Now moving down into the footer here, now I'm going to apply an offset class here.
Notice that I have mentioned that these two columns will occupy four plus seven, 11. So one column is leftover.
I'm going to apply an offset-1 class to this one.
Which means that this content on this div will be pushed right by one column here.
Similarly since I said offset one, this will be applied to extra small all the way up to the extra-large screen sizes.
And so that is the use of the offset class. So now that we have made the changes, let's save the changes and then go and take a look at our web page in the browser.
Going back to that browser, you now see how the header is as before, but in the first content row, you see that this content has been pushed to the left side and the label to the right side.
The second row is different has being maintained just as before.
But for the third you'll see that this has been pushed to the right and this has been pushed to the left.
That is the use of the order-sm-last and order-sm-first class is there.
Now going to the footer, you now see that the content in the first div here has been pushed right by one column,.
You can see that there is one column of whitespace here, and this isn't pushed right and the remaining ones have been formatted accordingly.
With this we complete the changes to our index.html page or additional page for this particular exercise.
With this we complete this particular exercise. In this exercise we looked at the use of the container, row, and column classes in order to design our web page a little bit nicer.
In the second part of the exercise which will follow this, we're going to add more to try and improve the way these web pages are rendered.
It is still not to my satisfaction.
Obviously, there is still room for improvement.
This may be a good time for you to do a git comment with the message Bootstrap Grid Part One.
This exercise introduces you to responsive design and Bootstrap support for mobile first responsive design through the use of the grid system. At the end of this exercise, you will be able to:
-
Create responsive websites using the Bootstrap grid system
-
Reordering content using push, pull and offset classes
Note: In this exercise we will continue to update the index.html file in the conFusion folder that we created and edited in the previous lecture.
Bootstrap is designed to be mobile first, meaning that the classes are designed such that we can begin by targeting mobile device screens first and then work upwards to larger screen sizes. The starting point for this is first through media queries. We have already added the support for media queries in the last lesson, where we added this line to the head:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
The viewport meta tag ensures that the screen width is set to the device width and the content is rendered with this width in mind.
This brings us to the second issue, designing the websites to be responsive to the size of the viewport.
This is where the Bootstrap grid system comes to our aid.
Bootstrap makes available four sizes, xs for extra small, sm for small, md for medium and lg for large screen sizes.
We have already seen the basics of responsive design.
In this exercise, we will employ the Bootstrap grid classes to design the websites.
We would like our website to have the content stacked on extra small devices, but become horizontal within each row for smaller devices and beyond.
Towards this goal, we will make use of the classes .col-, .col-sm-, col-md-, and .col-lg- for defining the layouts for the various device sizes.
We can specify how many columns each piece of content will occupy within a row, all adding up to 12 or a multiple thereof.
- We use the container class to keep content within a fixed width on the screen, determined by the size of the screen. The alternative is to use the container-fluid class to make the content automatically to span the full width of the screen. We will discuss further about this when we discuss the Bootstrap grid system in the next lecture. Add the container class to the first div right after the </header> in the file as follows.
<div class="container"> ...
- Let us now add the class row to the first-level inner div elements inside the container. This organizes the page into rows of content. In the next exercise, we will see how we can add other classes to the rows.
<div class="row"> ...
- Let us add the class jumbotron to the header class as shown below. This turns the header element into a Bootstrap component named Jumbotron. A jumbotron is used to showcase key content on a website. In this case we are using it to highlight the name of the restaurant.
<header class="jumbotron"> ...
- In the header add a container class to the first inner div and a row class to the second inner div.
- Finally, in the footer add a container class to the first inner div and a row class to the second inner div.
- In the header row, we will display the restaurant name and the description to occupy 6 columns, while we will leave six columns for displaying the restaurant logo in the future. Let us go into the jumbotron and define the classes for the inner divs as follows:
<div class="col-12 col-sm-6"> ... </div>
<div class="col-12 col-sm"> ... </div>
- For the remaining three div rows that contain the content, let us define the classes for the inner divs as follows:
<div class="col-12 col-sm-4 col-md-3"> ... </div>
<div class="col col-sm col-md"> ... </div>
- For the footer, let us define the classes for the inner divs as follows:
<div class="col-4 col-sm-2"> ... </div>
<div class="col-7 col-sm-5"> ... </div>
<div class="col-12 col-sm-4"> ... </div>
<div class="col-auto"> ... </div>
Now you can see how the web page has been turned into a mobile-first responsive design layout.
- In the content rows, we would like to have the title and description to alternate so that it gives an interesting look to the web page. For extra small screens, the default stacked layout works best. This can be accomplished by using the .order-sm-last and .order-sm-first for the first and the third rows as follows:
<div class="col-12 col-sm-4 order-sm-last col-md-3"> ... </div>
<div class="col col-sm order-sm-first col-md"> ... </div>
- For the div containing the <ul> with the site links, update the class as follows:
<div class="col-4 offset-1 col-sm-2">
- After saving all the changes, you can do a Git commit with the message "Bootstrap Grid Part 1" and push your changes to the online repository.
In this exercise, we reviewed responsive design and the Bootstrap grid system.
We'll continue with the bootstrap grid exercise that we started out in the previous exercise.
We're going to do a few more things to our index.html page in order to improve its layout.
We're going to use some custom CSS classes and add some color to our index.html page using custom CSS classes.
The next thing that I'm going to do is go down to the footer and for this UL here, you'll notice that this list when you look at our web page is displayed in the web page using this bulleted list here.
I'm not too happy with this bulleted list, I want to remove these bullet points and then simply show them as only the links there.
To do that, I'm going to use another list style called as list- unstyled and apply that to that UL tag there.
Going back to our web page, to this UL tag in the footer, I'm going to apply the class as list-unstyled, and this would remove those bullets in front of these links there.
Now, let me add a few custom CSS classes to the index.html page.
To do that, we will now create a folder here and name it as the CSS folder here. Inside the CSS folder, I'm going to create a new file and name the file as styles.css.
Now, inside the styles.css file, I can now add some CSS classes in order to style our page.
Let me add some CSS classes here.
I would add my first class as row header.
As the name implies, this class I am applying to the header.
And then, I would apply the margin as zero pixel auto and then padding as zero pixel auto.
This is for the row header.
I'm going to have zero margin and zero padding for the row header.
And then for the row contents, so I'm going to add one more CSS class called row-content.
And then for this, I will add margin zero pixel auto, and then padding have it at 50 pixel, zero pixel, 50 and zero pixel.
Then I'm going to add a border at the bottom of my row here.
And then, the border I will give it one pixel and then call it a ridge.
And I will set the minimum height to be 400 pixel for the content here.
That way, my web page will look like more nicer on the screen.
Now this again, you have to try and see until you are satisfied with the way the page is laid out.
Now also, I'm going to include one more class called as the footer which as you might have already guessed, I'm going to apply to the footer and I will apply a background color to the footer as D1C4E9.
If you ask me how I selected the color, I just looked up the color and then I was happy with that color.
You can choose any color you want to apply, but this color seems to be good for me.
I added that color.
And for the padding, for the footer, I would add 20 pixel and zero pixels.
Now, once I have added this styles to my CSS file, let me apply the CSS file to the index.html page.
I'm going to index.html page.
Obviously, I need to use that CSS file inside my index.html page.
Right after the bootstrap CSS file, I'm going to do a link and style sheet, and this is style.css file there.
That is where my CSS file is stored.
I'm going to include that into my index.html page. Now, I am going to go into the body and apply the classes that I have just created.
Going to the header, I will apply the row header class to the div in the header.
Then, for the content, I would apply the row content classes to the rows there.
To the three rows in the content, I apply the row content class and then going down to the footer, to the footer tag, I will apply the class footer here, and then save the changes.
Let's go and have a look at that page now.
Going to your web page, we're already beginning to see some interesting changes to the web page.
You can now see that the content in the web page has been laid out a bit more cleaner.
That is the border bottom that we added to the row content, so you can see that there is enough separation between the rows although the contents of the rows are still positioned towards the top in the rows, so you have these three rows and then look at the footer, the footer now has acquired the background color that I applied, and notice how the links are styled with the list-unstyled on the left side here.
We are not done yet, we got to do a few more changes to the index.html page, and then come back and have a look at the final result of this exercise.
Going back to your Editor, I'm going to add a few more CSS classes into my style structure, it is a file, so I'm going to go in there and then add a class called Jumbotron.
You'll see that we have already applied the Jumbotron to our header there.
Now, if I add more properties to this Jumbotron class here, this will be applied to the Jumbotron, in addition to the standard default Jumbotron that bootstrap already includes.
I'm going to add in a few more things, I'm going to add in a padding of 70 and 30 pixel on its surroundings, and then a margin of zero pixel all around, and I will set the background of this to 9575CD.
This is somewhat of a darker purple color which seems to go very well on the Jumbotron.
Again, by trial and error, I selected that color, and also the text color as floral white.
For the Jumbotron, we are going to apply those classes, and also, I'm going to apply one more class to the address class.
We have an address in the footer, so I'm going to change the font size of that to 80 percent, a slightly smaller font than the normal font, and the margin, I will give it a zero pixel, and the color, I'm going to use zero F, zero F, zero F, and then save the changes.
So couple more CSS classes added, switching back to index.html.
What I'm going to do now, is to go to the content rows and then I'm going to try and position this content in the middle, vertically in that row.
This is where I'm going to take the help of the vertical alignment that bootstrap grid supports through the Flexbox support.
To do that, I would say align-items-center, so this is the other class that I need to add, align-items-center.
And I'm going to add that to the remaining two rows also, align-items-center to the second and the third row, and that should do a vertical justification of the content of the rows.
We'll see the result in a minute. Going down to the footer. In the footer, you see that we have used the column auto for this copyright content there.
Now, I'm going to position this right in the middle horizontally using that justify-content-center class, so there is a justify content and a few other classes there. I'm going to use to justify-content-center class for that.
That will essentially position that column in the center of the row there.
That applied to that, and then, one little change that I'm going to do, is to this inner div there, I'm going to apply a class as text-center to that, so that these links are centered on the screen.
With these changes, let's go and take a look at the web page, at end of this exercise.
Going to our web page, our web page is already starting to look even better now, so you can now see that the Jumbotron is now styled with a new background color, which is a little dark purple there, and the lettering is now in floral white color, little bit indented there, then you can now see that the content in the content rows are now vertically centered, for the three content rows.
This is the use of the align-items-center that we applied to the rows there.
Then going to the footer, you can now see that this copyright is now justified to the center of the screen.
Look at how the links here have been centered.
I realized that I want to also position this vertically centering to this particular row, so let's go and apply one more class to move this to the center of this particular row vertically.
To do that, going back to index. html, in the footer for that particular column which contains those, I will apply the class as align-self-center.
This should be applied to the div which uses the column class.
With this, that particular content will be aligned to the center of the row.
The remaining content will still remain at the top.
Let's take a final look at the footer.
Going to the footer in our web page, you can now see how this has been positioned vertically in the center.
These two pieces of content are still aligned to the top of the row, that is fine because that looks okay on in there, but this one I have dragged it down vertically to the center of this particular row.
With this, we complete this exercise.
In this exercise, we saw the use of custom CSS classes, and also used some of the classes for justifying the content horizontally and vertically in our rows.
This is a good time for you to do a good comment with the message, Bootstrap grid, part two.
This exercise continues the examination of responsive design and Bootstrap support for mobile first responsive design through the use of the grid system. We also learn how to customize some of the Bootstrap classes through defining our own modifications in a separate CSS file. At the end of this exercise, you will be able to:
-
Customize the CSS classes through your own additions in a separate CSS file
-
Centering the content both vertically and horizontally within a row
- You can use several list styles to display lists in different formats. In this exercise, we will use the unordered list style list-unstyled to display the links at the bottom of the page without the bullets. To do this, go to the links in the footer and update the ul as follows
<ul class="list-unstyled"> ... </ul>
We can define our own custom CSS classes in a separate CSS file, and also customize some of the built-in CSS classes. We will now attempt to do this in this part of the exercise.
- Create a folder named css. Then create a file named styles.css in the css folder. Open this file to edit the contents. Add the following CSS code to the file:
Create styles.css in css folder and add!
.row-header{
margin:0px auto;
padding:0px;
}
.row-content {
margin:0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
}
.footer{
background-color: #D1C4E9;
margin:0px auto;
padding: 20px 0px 20px 0px;
}
- Include the styles.css file into the head of the index.html file as follows:
<link href="[css/styles.css]{.underline}" rel="stylesheet">
- Then add these classes to the corresponding rows in the index.html file as follows. See the difference in the index.html file in the browser. The first one is for the row in the <header>, the next three for the rows in the content, and the last one directly to the <footer> tag.
Add these classes to corresponding rows in index.html!
<div class="row row-header"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<div class="row row-content"> ... </div>
<footer class="footer"> ... </footer>
- Our next set of customization is to the jumbotron and the address. Add the following to styles.css file:
Add to styles.css!
.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: #9575CD ;
color:floralwhite;
}
address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}
- In the content section, update all the rows as follows:
<div class="row row-content align-items-center">
- In the footer, update the third column div that contains the social media links as follows:
<div class="col-12 col-sm-4 align-self-center">
- Update the copyright paragraph as follows:
<div class="row justify-content-center">
<div class="col-auto">
- Update the inner div containing the social media links as follows:
<div class="text-center">
- After saving all the changes, you can do a Git commit with the message "Bootstrap Grid Part 2" and push your changes to the online repository.
In this exercise, we continued our review of responsive design and the Bootstrap grid system. We also learnt how to customize using our own CSS classes.
- 05-Responsive-Design-Bootstrap-Grid-part-1.pdf (6 slides)
- 05-Responsive-Design-Bootstrap-Grid-part-2.pdf (17 slides)
- 05-Bootstrap-Grid.pdf (17 slides)
-
CSS Flexible Box Layout Module Level 1 (W3C Documentation)
-
The Subtle Magic Behind Why the Bootstrap 3 Grid Works (a detailed explanation of why the Bootstrap grid system works the way it does, a delight to read!)
-
What The Heck Is Responsive Web Design? (a short presentation that introduces responsive web design)
-
Beginner's Guide to Responsive Web Design (simple introduction to responsive web design)
-
The 2014 Guide to Responsive Web Design (an updated guide to responsive design)
It is time for your first assignment in this course.
In the first assignment, we're going to provide you with unstyled aboutus.html page.
The zip file containing that aboutus.html page is available to you in the assignment instructions.
You need to download the page and then move that page to your con Fusion folder.
Thereafter, you will apply Bootstrap classes and the Bootstrap Flexbox grid to style the page, then you move the page to the Con Fusion folder, then you can view the page in your browser by typing localhost:3000/aboutus.html and your light server build server up the aboutus.html page, so this is the only way you can get to view the page.
To begin with, the page will look like this, a completely Unstyle page which just contains content.
Now your job is to go through three tasks in order to format this page.
Let's look at the three tasks in more detail.
Your first task is to apply the Bootstraps CSS and the Javascript classes to the aboutus.html page so that this page will be instantly transformed into this page, where as soon as you add the Bootstraps CSS and JavaScript classes, the header and footer will automatically get formatted correctly, because I have simply copied the header in the footer from the index.html page into this page.
and I left all the Bootstrap formatting as such, but the actual content of the page is still left unstyled.
Now, as the second task, you're going to apply the Bootstraps Flexbox grid including the Container, the rows and the column classes to this content or the page so that you can style it properly.
Now, when apply the classes, you're going to apply the row and column classes to the aboutus to just leave it as such.
Then you're going to apply the row and column classes to this content so that this content occupies only half the screen, and then you're going to apply the row and column classes to this content so that have occupies the entire screen width.
Choose the row and column classes correctly to apply to this.
You can use the custom CSS classes that we have already implemented for the index.html by adding the style.css file, also to style the content in this page.
When you complete the second task, your page will end up being styled like this.
You can see that the aboutus page exists in its own.
Then Our History part, notice that on a small to large screen size, the Our History will occupy only half the screen width.
Then the Corporate Leadership part occupies the entire screen width in this case.
This is the second task that you need to complete in your assignment.
For the third task as you can see, this content layout looks fine for larger screen sizes, but when you go to the extra small screen size especially like this,
you notice that the content is too much in this section.
What we would like to do is to use another Bootstrap class provided for us called, DM and DSM block.
There is a link to the responsive classes in the assignment resources, so you can check out the documentation for the Dnut? and DSM block.
You need to apply those so that this description will be hidden in the extra small screen sizes.
When you apply the classes to this corporate leadership part, the same content will now be laid out without the description, so it will be hidden in the extra small screens size.
But when you go to the small to large screen size, the content will become visible.
You can notice that for the extra small screen size, the content is hidden, but for the small screen size, that description content will be shown clearly.
This is your third task in your assignment.
While you are at it, you can also apply the same classes to the descriptions in our index.html page so that the detailed descriptions for the content items will also be hidden in the index.html page when it is viewed on extra small screen sizes.
This completes your first assignment.
Also, when you submit your assignment, please take a full page screen shot of your layout both in small to extra-large screen size and also on the extra small screen size, and then include that as part of your submission.
To take a full page screenshot in Chrome, you can use a Chrome extension that is available to us, the link to the Chrome extension is provided in the assignment resources that follow the assignment description.
After you complete your assignment, in case you're saving your changes to a Git Repository, please don't forget to commit the changes to your Git Repository with the Message Assignment One.
Assignment 1 Resources
aboutus.html
-
Bootstrap display utilities (documentation here about the d-none and d-sm-block classes)
The first step in your journey towards the implementation of the Capstone project begins with an idea.
In this module you will develop the idea for your project, the set of expected features, survey the market to look at similar ideas to enable you to differentiate your project from others, while at the same time drawing inspiration from them.
You are required to submit a formal ideation report following the structure given in the template.
This will enable your peers to provide you feedback and suggestions for your project.
Before you get started on a project, the first step is to develop the idea for the project.
In this module you will explore how you develop your idea and come up with possible set of features for your project.
At the end of this step you should be able to:
-
Clearly express the central idea of your project, and identify the problem being addressed
-
Delineate a set of features that you expect your website and app should support
-
Identify other projects that might have similar features and would act as exemplars for your project
-
A brief introduction to your website idea. State the goals of the project.
-
The values / benefits (tangible and intangible) this application can bring to a company/organization/end-user.
-
A brief list of features that you expect your website to support.
-
Brief justifications for including these features.
-
Do a survey of the Web to find about five web sites that might have similar ideas as yours.
-
Briefly compare the features of these applications with your application idea.
-
Give references to any material / websites / books etc. relevant to your application idea
-
Give the links to the websites relevant to your idea, that you listed in the section above.
In this lesson, you will be given an overview of navigation design and the importance of providing appropriate navigation support within your website.
You will learn about support for navigation design elements available in Bootstrap, including the Navbar and Breadcrumbs.
Other navigation aids will be covered in subsequent modules.
In addition, the use of icon fonts in web page design will be covered.
The exercises will concentrate on adding a responsive navigation bar to the website.
At the end of this lesson, you will be able to:
-
Understand the need for navigation support in a web project
-
Use the Bootstrap navigation features including the Navbar and breadcrumbs in providing navigation support in websites
-
Use icon fonts for decorating your website with meaningful graphical elements
Let's now talk about navigation.
What is navigation, why is navigation important for your website?
And how do you we provide navigation information on your website?
These are the question that we will try to answer In this particular lecture.
The first obvious question that comes to your mind is, why do we need to have website navigation?
As you realize, most websites are no longer single pages.
Of course, there do exist those single page websites like your professor's webpage In your computer science department.
But most websites usually contain more than one page.
As we have seen with our confusion website that we are building, we already have added a second page called aboutus.html page.
Now the way we navigated to the aboutus.html page was to explicitly type that into the address bar of our browser.
But that is a very inconvenient way of navigating to your website.
It would make a lot more sense to provide an intuitive means for the users to navigate to your website.
This intuitive means could be provided by many different approaches, the navigation bar being one of the most common methods of indicating this information.
We'll look at several common ways of providing navigation patterns on typical websites.
In this context, you often hear people talking about information architecture.
The information architecture begins with the structure of the system, with respect to the way the information is organized, labelled.
And navigation is provided through the content or through this information.
Now information architecture, by itself, is a whole big field.
It is beyond the scope of this course to cover information architect.
But, in case you are interested in organizing and providing information to users through, for example, websites, then I have provided you with some links in the additional resources that you can go and read for further knowledge.
But in any case, when you're designing a website, it is important to understand the need to design the information navigation structures within your website.
And this organization of information within your website also dictates what kind of navigational aids you provide on your website, and based on how that information is organized.
Typically, a website would be organized in some kind of a tree structured or a hierarchical fashion.
And that automatically dictates to you how you would design navigational support within your website.
The use of a navigation bar, breadcrumbs, and other means of navigation are very, very essential for enabling users to be able to see various parts of your website.
When you visit most websites you will often look for the navigation bar.
This is some kind of a bar that is typically attached at the top of the website, or sometimes at the bottom of the website, or sometimes on the side, that provides you with sufficient pointers towards the kind of information that you can access on this site.
Your navigation bar will typically contain links to various pages that form part of your website.
A typical navigation bar, how do you go about designing this?
When you design a typical navigation bar, you should obviously keep in mind some dos and don'ts about how you design navigation bars.
First is that you use user-friendly and simple terms within your navigation bar to indicate the various links that the users can follow within your website to reach information..
You should provide a standardized navigation, so that wherever the user is within your website hierarchy, they'll always know how to go back to the homepage, how to go to the next, previous, or up and down the hierarchy of some sort.
So indicating the location of the user within the hierarchy of your website is very, very useful to provide a user-friendly way of navigating your websites.
Also, there are some standard conventions that people follow when these navigation bars are designed.
Typically, when you have the logo of your website or your company included in your navigation bar, a click on these logos or a home button should take you back to the topmost level of the hierarchy or the home page of your website, typically the index.html page.
Some of the don'ts that you should keep in mind is that you should not have too many choices in your navigation bar.
How many is too many?
If you find that navigating using your navigation bars is too cumbersome, then that means that there are too many options on your navigation bar.
Provide a reasonable set of choices within your navigation bar so that you can indicate the directions that the user can follow in navigating through your website.
And when you use these navigation elements in your navigation bar, don't use generic labels, use meaningful labels.
For example, if you put a label named product in your navigation bar, people will be confused about what you mean by product.
Or say, if you put a service in your navigation bar, they may be confused. What kind of service are you providing?
It will be more meaningful to give a more descriptive term In your headers in your navigation bar.
Yet another means of providing navigation for users is to provide what is called as breadcrumbs.
These are typically provided somewhere in that page, typical towards the top edge of the webpage, closer to the heading of that webpage.
The breadcrumbs sort of indicate some kind of a navigational hierarchy within which you're currently In your website.
So this provides a secondary navigation option for your website.
So this could be placed somewhere below the primary navigation.
It may indicate the hierarchy of pages through which you have gone.
And the current location may be highlighted specifically in the breadcrumb there.
So various ways that people can use breadcrumbs include providing a path based navigation.
Say, for example, if you have a user going through a set of steps in order to complete a task on your website, say for example, reserving an airline ticket.
Then you could use a breadcrumb approach for indicating to them what step the user is currently on in the sequence of steps.
Similarly, if you are providing your location based navigation for hierarchical approach within your website.
What level of hierarchy you are in and what is the upper part towards the root of your hierarchy, so that could be indicated by your breadcrumbs.
Your breadcrumb could also be attribute based, meaning that you provide a set of choices indicated in your breadcrumb for the user at the current point of time.
A typical front-end UI framework provides many other ways of providing navigation on your webpages.
These include tabs, pills, pagination, dropdowns, accordions, tags, and SchrollSpy, and Affix.
We'll look at some of these in a bit more detail as we go through the various lessons in the modules that follow this particular lesson.
We just completed a discussion on the importance of providing navigation in your website.
We also looked at several different ways that we can provide navigation in a website. It's now time for us to look at bootstrap and look into components that bootstrap provides that enable us to add navigation to our websites.
Two important components from bootstrap is the Navbar and Breadcrumbs. We're going to examine both of these in this exercise.
Let's get started by adding a navigation bar to the top of our web page.
We can do that using the Navbar component that is part of bootstrap.
How do we get started? We go to the body of our HTML page.
Here, I have index.HTML open.
And at the top, I'm going to add in an element using that nav HTML tag.
Now the nav HTML tag is intended for providing navigation.
Let's take the advantage of this tag and build our navigation bar using the nav tag.
Now, at the top, I'm going to add in this tag, put the nav and construct the navigation bar around this nav tag.
Once we add this nav tag into index.HTML, then we can go ahead and then apply the bootstraps classes to this nav tag.
I apply the class navbar.
The navbar class in bootstrap allows me to create a navigation bar.
There are many different ways of customizing the navigation bar, which we have a look at as additional classes that will add to this nav tag.
Along with the navbar, we also add in the next class which is navbar-dark.
Now I want my navigation bar to be dark in color, with a darker background.
Because that goes very well with the website that I have just designed. We can have navbar-light, which is a lighter color navigation bar. So, you can choose to use either one of them in your web page.
The next class that I'm going to use is navbar-expand-sm class.
Now, and also, I will specify the screen size below which the toggle-able behavior comes into existence.
Now, when I say navbar-expand-sm, that means that for small and extra small screens, this navbars will become a toggle-able navbar.
Meaning that, it will be collapsed in those screen sizes.
You will pretty soon learn how this works, when we look at how we can add the collapse plugin to the navbar to enable that kind of behavior.
So along with a navbar toggle-able sm, I'm going to apply a background color to the navbar initially, which would be bg-primary.
Now bg-primary is that primary color that is defined in your bootstrap.
By default, this is a version of blue color that is used by bootstraps.
So I'm going to start with that as my primary color.
Later on, I will customize my navbar's color using some CSS classes.
In addition, I am also going to apply another class called the fixed-top to that navigation bar.
What fixed-top does, is it fixes the navigation bar to the top of the browser window where this web page is being rendered.
Even when you scroll your wet page, the navigation bar was until remain at the top of the page.
You can simply use fixed bottom to fix the navigation bar to the bottom of your browser window or you can say, static top.
And also, you can just not use this class.
If you don't use that, then your navigation bar will also scroll when your web page is scrolled upwards.
In my website, I choose to keep the navigation bar fixed at the top of the page.
There are many other options that are available which you can find in the bootstraps documentation.
This is one example of the use of the navigation bar.
Now in addition, inside the navigation bar, I'm going to enclose whatever content is going to be used in the navigation bar inside a container.
This is where I will use a div element here and apply the container class to this div element.
Whatever is enclosed inside there, will be restricted to the same width as the rest of my Web page.
As you recall, I used the container class to define the breadth of the content in my web page, so I'm going to apply the same to my navigation bar also, so that my navigation bar information will be displayed within the same width as the rest of my web page.
You can choose not to use the container class in the navigation bar, In which case, the contents of the navigation bar will spread over the entire width of your screen.
Inside the navigation bar, I'm going to adding a class to an a tag here.
This class which I call as navbar-brand, allows me to display some information as a branding information in my navigation bar.
If you have a company for example, you can display the name of your company or the logo of your company using the navbar-brand so that will be prominently displayed in your navigation bar.
Obviously, when you visit many websites, you will see that the name of the company is somewhere visible in the navigation bar of that website.
Let me add in that navbar-brand. This can also be hyperlinked to the home page of your website.
I'm going to leave that there. In the remaining pages on my website, I will just add the href to bring me back to the index.HTML page, which is the homepage.
And inside here I'm going to add in the name of my restaurant.
Let's save the changes and go and have a quick look at the current state of my navigation bar.
Going to the web page in the browser, you can now see where navigation bar is visible on my web page in the browser.
The navigation bar is now at the top of the page and you can see that as I scroll my page, the navigation bar still remains at the top because I used to fixed-top class.
You can also see the navbar-brand allowing me to display the name of the restaurant there. Later on I'm going to replace that with the logo for this restaurant.
You do notice that the navigation bar is partly covered in the Jumbotron.
You're going to fix that a little bit later using some CSS customization.
The next thing that I'm going to do is to adding a few links to my navigation bar, so that these links will lead me to the other pages in my website.
How do we do that? Going back to index.HTML, I'm going to add in a ul here, within which I'm going to declare all the various links that are going to be displayed in my navigation box.
This ul to which I'm going to apply the class as navbar-nav.
This is the class that will help me to define the set of links that will be included in my navigation bar.
And these links will be displayed horizontally inside my navigation bar.
The mr auto-class that I have also applied to the ul, is used to specify the right margin. So this is a utility class that is available in bootstrap that allows me to specify the right margin.
If I say, mr-auto, what it means is that on the right side, the right margin should be set as much as possible.
Which means that the content will be pushed as left as possible within the navigation bar. Inside this unordered list, I can use list elements to include the various links that are going to be part of my navigation bar.
In there, I'm going to add in a few links there and I will start on by specifying the first one there with the link.
To every list item in your navigation bar, you're going to apply the class as nav item. This allows these list items to be displayed horizontally as links in my navigation bar.
And then inside here, I can then use the a tag to add in the actual link that will be part of my navigation bar.
Inside there I use the a tag with the class nav-link and this also allows me to use the href. Attribute to define the link there. And the first one that I'm going to include is Home.
This would include an item called Home in this navigation bar.
Let me just copy that and then paste that. And then we will edit some of these because I want to add four different ones to my navigation bar.
The first one is Home. The second one would be About.
The third one would be Menu which I'm going to build as part of the next course. And the last one will be Contact.
A typical company website would have links like this in its navigation bar.
With adding these two, now what I can do is that we can explicitly identify one of these links as the active link, meaning that when you are on that particular page, that particular link can be highlighted.
To do that, we will apply here the class called active to one of these list items.
In this case, since this is the index.html page, I'm applying the active class to the home link there.
This pretty much completes my navigation bar in the index.HTML page.
One little thing that I would like to fix here is that the About link, I want to link it to the aboutus.HTML page that we have already included into our website, because that is where I want it to lead.
Let's go and take a quick look at our navigation bar of this part.
Coming back to our navigation bar, you can immediately see the result of including those items into the unordered list there.
You see the Home, About, Menu, and Contact there, and each of them is a link but this is a navigation item here.
And note how the Home is highlighted here because of the use of the active class.
If I click on the About, it should take me to the About pitch.
Lo and behold, there we are.
But I do realize that I don't have a way of going back, so which means that I also need to hand this navigation bar to the aboutus.HTML page.
We will get there in a short while.
For now, I'm going to quickly navigate using the back button of my browser back to my index.HTML page.
One thing that I also wanted to demonstrate to you was how this navigation bar will collapse for small and extra small screen sizes.
Let's turn on the view using the Responsive View, and then let me go to the Galaxy S5.
And I noticed that when I use the Galaxy S5 like this, you can see that this is being displayed earlier than it is already covering the screen.
That is not the behavior that I want. I want to be able to hide this when I am viewing this on a small and extra small screen.
And then perhaps I add a button here which I can use to toggle on and off the display of these links.
You have seen such things in mobile websites. How do we do this in bootstrap?
Let's go to that step next.
Going back to our navigation bar here.
Let me add in a button there, which will act as the toggle button for showing and hiding my links from my navigation bar when it is displayed on extra smart and small screens.
To add there, let me add in a button and apply some classes to this button. We're going to discuss more about buttons in bootstrap in the next lesson.
But to add a button in bootstrap, you would apply the class for this particular button as navbar-toggler.
This is a navbar-toggler.
As the name implies, you are already beginning to understand what this button is going to do in this case.
And then I would add the type as button to indicate that this is acting as a button.
And then data-toggle as collapse.
Now, this data-toggle attribute that you'll see here is actually a JavaScript component usage in bootstrap.
We're going to look at this data hyphens bar kind of attributes more in the next module, where we will look at bootstraps JavaScript components.
The nav bar requires one of those JavaScript components to be able to toggle on and off my links in my navigation bar.
That's the reason why I quickly introduced this concept here, but we'll come back to examine this bootstraps JavaScript components more in the next module.
Data-toggle collapse and then the data-target as #Navbar. Now, I'm going to introduce another div with the ID as navbar.
When I specify a date or target #Navbar, that refers to the ID of that other element which is going to be the target of this particular button here.
That's the part that I add in to the bottom.
Also, I want the button to display something here.
And typically, when you see these kind of buttons in mobile websites, it would contain free lines there, so which is typically called as the Navbar-toggle icon.
I'm going to include a special icon that is included in bootstrap, called navbar-toggler icon.
If I apply this class to span tag, then that will introduce a navbar-toggler icon to my button here.
That introduces a button.
We're going to look at what this looks like in a short while.
Now, when I click this button, I want to be able to show and hide these links.
To enable me to do that, what I'm going to do is to surround this ul with a div here.
I'm going to come in and introduce a div around this ul.
And to this div, I will apply the class as collapse, and then navbar-collapse, and then I give it an ID as Navbar.
Now, you're beginning to see the correlation between these classes and the ID and what I declared in the data toggle and the data target.
Here the data target I specify as #Navbar and so the ID given to this div is navbar.
And I specify the data-toggle as collapse.
Collapse is one of the bootstraps JavaScript components, which we will look at in more detail in the next module.
Enclosing this inside the div for small and extra small screens, this would be hidden by default, but when I click on the button, the contents of this div will be revealed on the screen.
Let me also add a mr-auto to the a class navarbar-brand there so that I automatically introduce a sufficient right margin to this navbar- brand.
Now, let's go and take a look at this in our browser. Going to the browser, you can now see how my navbar is collapsed on small and extra small screen sizes. And notice this button on the left side.
When I click on the button, the links in my navigation bar are displayed and hidden.
This is the behavior that I want for responsive implementation of my navigation bar. If I switch to a normal, larger screen, the navigation bar is completely displayed including the links.
But when I view the same thing on a smaller screen like this, then the navigation bar links are hidden behind this button and then will be toggled on and off by clicking on that button.
So that is the responsive behavior that you can build into your navigation bar on your website.
Now that we have completed the navigation bar on my index.HTML page, I want to be able to introduce the same navigation bar to the aboutus.HTML page.
Before we get there, let's go to the footer here. And then you notice that in the footer, we have these links.
I want to be able to update this link also to point to aboutus.HTML so that even by clicking the link in my footer, I would still go to the about page.
Now, going back up here, what I'm going to do is simply copy this code of this navigation bar from here.
And then, go to aboutus.HTML page and then paste that into my aboutus.HTML page.
Not just that, I need to do some adjustment to this, because this is now in aboutus.HTML page.
Obviously, there are a few things that I need to update.
First and foremost, this navbar-brand which should lead me back to my Home page should now be updated as index.HTML here.
And then, the list item here now the second one the Home page again, I want to update that to index.HTML there and then the second link to the about, because this is the aboutus.HTML page, I'm going to put it back to that hash there and then I will remove the active class from the first item and then apply the active class to the second item, because this is the About Page and so that should be the one that is highlighted.
Again, going to the footer of the About Page.
In the footer, I will do the same updates to the links here so the Home Page should lead me back to index.HTML and then let me save the changes.
Now my About Page is also updated correctly.
Going to the browser, you can now see that I am on my Home Page and then when I click on the about page,
I will go to the About Page. Note how that same navigation bar is displayed in About Page, so you have about being highlighted because I applied the active class to that and then I can go back to my Home Page either by clicking on the narvar-brand or the Home. So let's click on the narvar-brand and we are back in our main or Home Page or index.HTML.
Now the navigation is correctly set up both in the Home Page and in the About Page.
Couple of additional things that I'm going to do is to apply if you see it's class that I can change my navbar's color and also I would like to add a breadcrumb to this About Page and so that the breadcrumb will also give me another way of navigating back to my Home Page and also will indicate the hierarchy in my website where I am at the moment.
Let's do those two steps next.
Going back to that editor in styles.css.
I'm going to add in a couple of more classes here.
You notice that my navbar was hiding part of the jumbotron.
In order to avoid that, what I'm going to do is to my body, I'm going to give a padding of 50 pixel on the top so that those 50 pixels will be left for the navigation bar to cover.
Whenever you are using a fixed top navigation bar it's a good idea to give this padding to the body of your webpage so that the navigation doesn't cover the topmost element in the body of your webpage.
The remaining ones I'm going to leave as zero pixels and also the z-index for my body as zero.
From your knowledge of CSS you understand what the z-index does and the next one I'm going to do is I'm going to overload navbar-dark class by adding in one more color for the navbar class and the color that I'm going to choose is 512DA8.
This is a dark purple color which looks very good in my website.
Indeed, If you have interest where I found this colors you can visit www.android.com and then look up their documentation for material design and there, they have suggestions for how colors can be used in your Android application but the same thing applies even to a website, so that is where I went and selected these colors to be used in my website.
Applying this, now when I do this, I have to go back to my index.HTML page and then from the navbar I should remove this bg-primary.
Otherwise, the color that I suggested in the CSS will not be applied to this.
Similarly, go to the aboutus.HTML page and then scroll to the navbar and then remove the bg-primary from that also.
Now, while I am in aboutus.HTML page, let me introduce a breadcrumb into my container, the first row of my container there.
This is where the About Us title was there, so there I'm going to go in and introduce an ol. I'm just using the ol tag as a way of introducing the breadcrumb.
You can use even a div for this and it'll still work just fine.
It just so happens that the example on bootstraps documentation used an ol so, I'm sticking with that even a simple div will also work fine here.
I say ol class col-12 breadcrumb.
The breadcrumb classes applied and not the col-12 meaning that stretched the entire screen.
And inside there, I'm going to go in and add two list items.
Now you see why the use of ol is useful here, because I can use the list items to describe the breadcrumb item.
Breadcrumb item here, so I include one breadcrumb item and then inside there I will use the A tag to define a link back to my Home Page.
I say, "A" and then to this A, I give the href as index.HTML and then include that into my first breadcrumb and then after this, the next one that I'm going to include is another list item and the second list item I will apply the class as breadcrumb item and active.
Note the use of the active class here and then inside there I will say "about us" I don't need a link here because I'm already on the page so that doesn't need to be included for this list item.
Let's save the changes, so you can see how the breadcrumb has been introduced into this particular About Us page here.
Let's go and take a look at the resulting webpage.
Going to my webpage, you can now see that the color of the navbar has now changed to the dark purple which are introduced through the CSS and this looks nice on the screen here.
Dark Purple, followed by a lighter purple and then at the bottom even more lighter purple for my footer.
Well, I am no designer, but this is the best that I could come up with in terms of adding close to websites.
As you know from history men are colorblind.
We have very poor taste in colors. If you're married your wife will definitely remind you about it.
Let's go to the About Page and see what it looks like.
This is the About Page and in the About Page you can see the navbar with the correct color there and note the breadcrumb included in the About Us down here.
You can see the Home which leads you back to the index page and then About Us as you saw we applied active link, active class to this one.
That's how the About Us is display and the Home Page.
This is the default breadcrumb style used in bootstrap and if I click on the Home Page I will go back to my Home Page.
With this we complete this exercise on navbar and breadcrumbs.
This is a good time for you to do a git commit with the message "navbar and breadcrumbs."
In this exercise, we will examine the navigation support that we can build into a web page using the Navbar in Bootstrap. At the end of this exercise, you will be able to:
-
Create a navigation structure for your website using the Navbar
-
Add breadcrumbs to the website
-
Include additional CSS classes into your project
- We will now add a simple navigation bar to the web page so that it provides links to the other pages on the website. Start by adding the following code to the body just above the header jumbotron.
Insert the following:
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="[./aboutus.html]{.underline}">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
In the above code, we can see the use of the nav element to specify the navigation information for the website. This nav element is styled by the navbar that declares it as a navigation bar, and the navbar-dark class to specify that the page should use the dark navigation bar. You will now notice the addition of a link with the name of the restaurant. This is the brand name for the website. You can replace this with the logo for the website. This is created by the <a class="navbar-brand"> tag.
In addition the inner ul is used to specify the items to be put in the navigation bar. This ul is styled with navbar-nav class to specify that the items should be displayed inline inside the navigation bar. We also use the container class inside the navigation bar.
- We would like the navigation bar elements to collapse for shorter screens, to be replaced by a toggle button so that the items can be toggled on or off when required on small and extra small screens. This can be achieved by adding the following code to the navigation bar, just below the container div:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
This creates a button with three horizontal lines. For medium to extra large screens, this button is hidden. For small and extra small screens, this button becomes visible. This button will act as the toggle for the navbar items.
- To hide the items from the navigation bar for the small screens, we need to enclose the ul within another div as follows:
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto"> ... </ul>
</div>
By doing this, we are specifying that this div with collapse and navbar-collapse classes and with the id Navbar will be collapsed on small and xs screens, but can be toggled on or off when the toggle button is clicked. Note the use of data-toggle="collapse" data-target="#Navbar" within the button above. This specifies that the menu items are collapsed on small and xs screens when the toggle button is visible. They can be displayed or hidden by clicking the toggle button.
- Copy and paste the entire navbar code also into aboutus.html to add the navigation also to that page. Make sure to change the <li> corresponding to "About" to active, and remove the active class from the Home link. Also, update the home link to take you back to index.html. Update the navbar-brand tag also to take you back to index.html.
- We would like to have the navigation bar displayed in darker purple color, instead of the current color. In addition, when we use the fixed navigation bar, we should give the body of the page an upper margin of 50px, so that the top 50px of the page does not get hidden under the navigation bar. We accomplish these by adding these CSS customizations to the styles.css file:
body{
padding:50px 0px 0px 0px;
z-index:0;
}
.navbar-dark {
background-color: #512DA8;
}
-
Remember to delete the bg-primary class from the <nav> element in both index.html and aboutus.html.
-
We are already beginning to see the page format close to the final format for this module.
- To add breadcrumbs to our pages, we take the help of the breadcrumb and breadcrumb-item classes to add the following to the row containing the About Us title in aboutus.html.
<ol class="col-12 breadcrumb">
<li class="breadcrumb-item"><a href="[./index.html]{.underline}">Home</a></li>
<li class="breadcrumb-item active">About Us</li>
</ol>
- Save all the changes and commit to your Git repository with a message "Navbar and Breadcrumbs".
In this exercise you learnt about adding a navigation bar and breadcrumbs to your website.
Let us now talk about icon fonts.
What are they?
How are they useful?
And how do we make use of them in designing our website?
Icon fonts provide a very flexible way of including tiny images into our web pages that can be styled just like text.
That is the reason icon fonts prove very, very useful in designing websites.
Using icon fonts, you can take a web page like this and quickly turn it into a web page like this.
Note the use of icons together with the text in the nav bar, and then when you scroll down to the footer, you can see more icons being used in the footer.
And also your social media links are now replaced by social media buttons here.
These are the changes that icon fonts will enable you to do to your website.
As I briefly mentioned earlier, icon fonts are a set of symbols or glyphs that can be used in your website design.
These can be used just like regular fonts, just like regular text fonts that you use in your website.
Their advantage is that you can style them and then expand and contract them and use all typical stylings that you use on your text, for your icons also.
They are seen as a popular lightweight replacement for simple graphics that you can use in your web pages, simply graphics or images that you can use in your web pages.
And they are very, very useful in designing your web pages.
There are many icon font packs that are available in the market.
One of the most popular ones is Font Awesome, which I'm going to talk about next.
Font Awesome, as I say, is a very popular icon font.
It is available free for use in designing your page design.
It has been extensively used by many different websites.
We'll learn how to download Font Awesome and then use it in web page in the exercise that follows this lecture.
Using Font Awesome in your webpage is as simple as using some classes that are applied to an i, or a span tag in your web page HTML code.
Once you include the CSS and the font files that are available through Font Awesome, then it is very straightforward to make use of Font Awesome in your pages.
Another common feature that you would see on web pages is the use of social site buttons there like Facebook, Twitter, Google+, and YouTube and many others.
Now fortunately for us, there is this other CSS file called bootstrap-social that you can download and make use of, including various social media site buttons into your web page.
We will see the use of bootstrap-social in the exercise that follows.
Once you download the bootstrap-social css file, you include that in your web page.
And then together with the Font Awesome icons, you can combine that with bootstrap social classes to include various social media buttons on your web pages.
Without further ado, let's move to the next exercise where we're going to use both Font Awesome and bootstrap-social, a modified version of bootstrap-social.css file that I provide on the exercise instructions that you should download and include in your confusion project and make use of it in the exercise.
Let's now move on to our next exercise, where we will learn more about Icon fonts.
We will download Font Awesome, and then include it in our website design.
And also we will download bootstrap social and design some social patents to be included in the pitch.
To get started, go to the confusion folder in your terminal window, and we will use npm to go and fetch Font Awesome for us.
At the prompt, type npm install font-awesome minus minus save.
This will fetch Font Awesome into our nobody folder.
And at the same time, it'll add Font Awesome to our package.json file as a dependency.
Once Font Awesome is fetched, then we can go ahead to make use of it in our website.
The next step is to fetch the bootstrap social and install it into our project.
To do that, at the prompt type npm install bootstrap-social@5.1.1 minus minus save.
And this will fetch bootstrap social and install it into our project.
Now, we need to use this font five, it's the Font Awesome, and the bootstrap social in our website.
Going to index.html right at the top, just before the style.css file, I'm going to import both Font Awesome and bootstrap social.
Right there, let's type in link rel stylesheet href node_modules/font-awesome/css/font-awesome.main.css let's import that into our index.html file similarly, given import the bootstrap social.
So node_modules/bootstrap-social/bootsrap-social.css.
These two we will include into our index.html.
Similarly, I need to include both these into my aboutus.html.
Let me copy that and move over to aboutus.html and then paste that into the aboutus.html also.
Now, getting back to index.html we are not going to make use of the Font Awesome icons, and also the bootstrap social icons in our index.html page.
Going to that navigation bar in the index.html page, right in this link for their homepage, I'm going to go in and add that Font Awesome code.
I'll say span class fa fa-home.
The fa says that I'm applying the Font Awesome class, fa home is the specific icon for the home icon.
Thus so that is what I wanted to use on my homepage.
And then close the span tag- and then after the space, the home button.
That will include the home icon in there. I'm going to copy this and then for the about, I'm going to use the same thing but instead of fa-home, so notice give a space between the closing span tag and about and instead of fa-home I would say fa-info.
Now these, I have figured out that these are the icons that I want to use.
You can check out the Font Awesome documentation to find out which particular icons and how you include them. For menu I will use a list icon there.
I call that icon as fa-list. Now, also I'm going to use larger sized icons.
I will also include fa-lg into the icon classes fa-lg.
Now for contact I am going to use fa-home, and then if this is fa-address-card fa-lg and save the changes.
You should repeat the same, addition of the same icons even in aboutus.html page, and then we'll take a look at our web page after we complete the changes.
After modifying also aboutus.html and index.html including the icons, I have saved the changes and then here I am at my web page and note how these icons got included into my navigation bar.
You can see that there is a home icon in front of home, there is an info icon in front of about, a list icon in front of menu and an address card icon in front of contact.
This is a nice way of adding some visual elements into your web page.
Now, this is wonderful. Now what I want to do is now work on updating the footage. Now, I want to replace the telephone fax and email with icons and also turn all these into social media buttons here.
To do that, we're going to make use of Font Awesome for this, and then we're going to make use of bootstrap social for this.
Going to the footer of the index.html page, I'm going to replace the telephone with Font Awesome icon.
I would say, "i" as I mentioned, you can either use span or I for specifying the Font Awesome icons.
Font Awesome website uses I but I'm showing you two possible ways of doing these things.
I say fa fa-tel, I'm sorry fa-phone and close the <i> tag here.
And for fax, I'm going to simply copy this, and then for fax if it is fa-fax, and for email it is fa-envelope and save changes.
Now apply the same to the aboutus.html page.
Going to my web page, you immediately notice that the telephone, fax, and email, are now replaced with the corresponding icons.
Now the last step is to use bootstrap social to replace all these links with the social media buttons.
To get that done, we'll go to the footer and then replace each of these with their corresponding icons there.
I would say, i class Font Awesome fa-google-plus and close the <i> tag there. And then I'm simply going to copy this and then apply the same to the remaining ones.
I will say, Facebook, LinkedIn, Twitter, YouTube, and finally for mail I'm going to use an envelope icon there.
In addition, to turn this into bootstrap social patents to the A tags, we should apply the classes as button button-social icon, and then button-google doing the same to the remaining ones.
For the second one it would be Facebook, then LinkedIn, Twitter, Google and then for the last one, since we don't have a corresponding bootstrap social icon button for the mail, we won't have anything except button social icons.
Now with this, let's go and take a quick look at our footer.
Going to your footer, you can now see all the buttons have been turned into their corresponding social buttons there.
Let's do the same change to the footer in aboutus.html.
I'm just copying that code there and then going to aboutus.html, and then simply replacing that in the footer of aboutus.html.
With that let's take one final look at our web page.
Going to our web page, you can see that now all the social media links there have been turned into social media buttons there.
Going to the about page, you'll see the same thing in the about page also.
Now that you've completed this exercise, this may be a good time to do a good commit with the message, icon fonts.
In this exercise, we will learn the use of icons in web page design using Font Awesome icons, and bootstrap-social icons. At the end of this exercise, you will be able to:
- Use icons within your website to represent various entities making use of the glyphicons, font-awesome icons and bootstrap-social icons
Note: Some people have pointed out that if they have AdBlocker installed, then the font icons are not showing up in their browser.
- One of the most popular icon font toolkit is Font Awesome. Go to its website http://fontawesome.io/ to check out more details about this icon font. You can get Font Awesome using npm by typing the following at the prompt:
$ npm install font-awesome@4.7.0 --save
- Another module that we install is Bootstrap Social that enables the addition of Social buttons to our site. You can find more information about it at https://lipis.github.io/bootstrap-social/. To install it using npm, type the following at the prompt:
$ npm install bootstrap-social@5.1.1 --save
- We now need to include the CSS files for font awesome and bootstrap-social in the index.html file. Add the following code to the head of the file after the links for importing Bootstrap CSS classes. Do the same change to aboutus.html file:
<link rel="stylesheet" href="[node_modules/font-awesome/css/font-awesome.min.css]{.underline}">
<link rel="stylesheet" href="[node_modules/bootstrap-social/bootstrap-social.css]{.underline}">
- Let us now use some font icons in our web page and decorate it. Update the navbar's ul list items as follows in index.html:
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-home fa-lg"></span> Home</a></li>
<li class="nav-item"><a class="nav-link" href="[./aboutus.html]{.underline}"><span class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
- Similarly update the navbar's ul list items as follows in aboutus.html:
<li class="nav-item"><a class="nav-link" href="[./index.html]{.underline}"><span class="fa fa-home fa-lg"></span> Home</a></li>
<li class="nav-item active"><a class="nav-link" href="#"><span class="fa fa-info fa-lg"></span> About</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-list fa-lg"></span> Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-address-card fa-lg"></span> Contact</a></li>
- Next, in both index.html and aboutus.html, go down to the address in the footer of the page and replace the "Tel.", "Fax" and "Email" with the corresponding font awesome based icons as follows:
<i class="fa fa-phone fa-lg"></i>: +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i>: +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i>:
<a href="[mailto:confusion@food.net]{.underline}">confusion@food.net</a>
- Finally, let us use the bootstrap-social CSS classes to create the social buttons in the footer in both index.html and aboutus.html, by replacing the social sites' links with the following code:
Insert the following:
<div class="text-center">
<a class="btn btn-social-icon btn-google" href="[http://google.com/+]{.underline}"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook"
href="[http://www.facebook.com/profile.php?id=]{.underline}"><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin"
href="[http://www.linkedin.com/in/]{.underline}"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter"
href="[http://twitter.com/]{.underline}"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-google"
href="[http://youtube.com/]{.underline}"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon"
href="[mailto:]{.underline}"><i class="fa fa-envelope-o"></i></a>
</div>
- Save all the changes and commit to your Git repository with the message "Icon Fonts".
We learnt about using icon fonts in a web project.
- Accessible Rich Internet Applications (ARIA) (Accessibility support and screen reader support)
-
Information Architecture 101: Techniques and Best Practices (Quick introduction to Information architecture with respect to website design)
-
Web Site Information Architecture models (Another good resource on information architecture)
-
What is information architecture? (Good definition and explanation about the topic)
-
Information Architecture Tutorial (Comprehensive look from a website design perspective)
-
Designing A Winning Navigation Menu: Ideas and Inspirations (Good suggestions on how to design navigation for a website)
-
Are You Making These Common Website Navigation Mistakes? (Worth reading at least to learn what not to do)
-
3 Reasons We Should Stop Using Navigation Bars (A provocative view on navigation bars)
-
Breadcrumb Navigation Examined: Best Practices & Examples (Great suggestions on using breadcrumbs for navigation)
-
Breadcrumb Navigation: A Guide On Types, Benefits And Best Practices (Another great resource on types and usage of breadcrumbs)
-
Why And How To Use Icon Fonts (a good overview of icon fonts)
-
Icon Fonts are Awesome (another good introduction to icon fonts)
-
Font Awesome (one of the most popular icon fonts)
-
Get started with FontAwesome (good official help)
-
The Final Nail in the Icon Fonts Coffin? (a controversial opinion piece on icon fonts)
-
Using SVGs (alternative to icon fonts)
In this lesson we review the support for user input through the use of buttons and forms in a web page. We review Bootstrap button classes and Forms classes. At the end of this lesson you will be able to:
-
Create and style buttons on a web page using Bootstrap button classes
-
Create and style forms on a web page using Bootstrap form classes
Gone are the days when websites were purely used for delivering information to the users.
These days on most websites, users will be able to interact with the website to supply information, for example by clicking buttons or by filling in forms and by typing something into search boxes, and so on.
How do we support these kinds of interactions with the users?
That is what we're going to deal with in this particular lecture and the exercise that follows.
As an example, if you visit the Coursera website, you will see that you have buttons at the top here that you could click to reach different places.
You could have a search box, into which you can type in information, to search for, say for example, full stack web development and, so on.
What we notice is that user interaction needs to be supported on websites using many different approaches including buttons, forms, text boxes, check boxes, and many others.
Early interactions with websites were provided mainly through hyperlinks.
You could click on a hyperlink and go on to other places and so on, but this is obviously, hyperlink is just one of the many methods of interacting with your website.
You could have buttons included on the website which when clicked, will result in some action being taken on the website.
You could have forms that you fill out to supply information to the website.
When you look at how you would include such user Interaction features into your website, you will see that you could use something like the a tags that are useful for providing hyperlinks, then you have the button tags that enable you to include buttons in your website.
Now what we're going to look at is how do we format with a tags on the button tags using bootstrap classes so that you can style them to fake the general theme of bootstrap.
HTML already includes the form elements and the input elements in there.
Now, we can look at how bootstrap enhances these elements by providing styling features for forms, and various elements that go into the forms.
Buttons obviously provide a simple way of interacting with your website.
When you have a button on your website, you might hover on the button, you might click on the button and expect something to happen in the process.
The button behavior depends upon where it is positioned in bootstrap.
If the button is inside a form, for example, typically the button clicking will result in the form being submitted to a server, or the form information being canceled.
A button outside a form could have other ways of providing interaction.
Similarly, the < a > tag that we have traditionally associated with hyperlinks could also be hijacked to be styled and presented in the form of a button.
Here we will see how bootstrap provides classes that can be used to format the <a> tag into a button to be presented on your website.
We'll also look at various form elements, like the input elements, select, the button and also the text AD elements, and how we make use of them within our forms to design and construct a form that can be included in our website.
The exercise that follows this particular lecture will introduce you to bootstrap support for styling buttons, and also look at how various form elements can be enhanced using bootstrap classes to present classic Bootstrap forms.
In this exercise, we're going to look at Bootstrap's support for buttons and forms. We're going to include a few buttons and button group in our webpage. And we also look at designing forms and styling the forms using Bootstrap classes. To get you started, go to the instructions page and download the contactus.html.zip file that we have provided there. Right click on that, and then save this link into your conFusion folder. As, contactus.html.zip file. Once the zip file is downloaded, unzip the file to get contactus.html page. Then you can delete the zip file. Once you've unzipped the file and get contactus.html page, you would notice that when you load this page in your browser using localhost:3000/contactus.html, then you would see that this page is already pre-formatted with some content. You can notice that you already have the navigation bar there. We have the jumbotron already formatted for us. And you would notice that I have the breadcrumbs and the contact us heading here formatted. Then you will see some additional information, the address here. You will notice that the footer is already formatted. But you will notice two things here, you'll notice that there is a line here that says button groups go here and then one more line here that says form goes here. We're going to replace these two with a button group and a form. And along the way, learn Bootstrap's support for buttons and forms. Before we proceed forward, now that we have three pages in our website, it is a good idea for us to link them up together, both in the navigation bar and in the links in the footer. Let's modify those two so that we can navigate between these three pages easily. Going to the contactus.html page, you will notice that in the navigation bar, I already have the links to index.html set up correctly. And you would notice that at the bottom here you have the contact link here. But the link corresponding to the about has not been configured properly. Go to this link here and then update that to aboutus.html. The contact us link can be left alone as such. And then save the changes. Now similarly, go to the footer of this page. And you will notice that in the footer we have these three links here. And this may be a good point to replace the links with the links to the corresponding pages. I'll say, index.html, aboutus.html, and, contactus.html. And save the changes. Similarly, go to index.html, and then in index.html also, the contact us link has not been set up.
Let's update that to contactus.html.
Then similarly, update the links in the footer.
Also go to aboutus.html and then fix up the links even there.
In the aboutus.html also, in the header I'm going to fix up the link.
And also in the footer of aboutus.html.
When you go to your website, you'll be able to navigate back to your home page, to your 'about' page.
And from the about page, you can even go back to the contacts page.
All the links between the three pages in the corresponding headers, and also the footers, here should be setup.
If you click on any one of these will take you to the appropriate page.
Now is the time to start working on the buttons that we're going to include in our contactus.html page.
What I will do is I will replace this line with the code for the button and the button group and then after that, we'll come back to explain how this whole thing works.
Opening contactus.html in our editor, we'll locate the place where this statement, button group goes here, exists.
And then I'm going to replace that with the code corresponding to that button group first.
And then I'll come back to explain how this code works.
Let's save the changes, and then take a look at what this button group looks like in our browser.
Going to your browser, you can now see that in our webpage the button group has been created.
You can see that there are three buttons here, Call, Skype and Email buttons.
Now, all these three are joined together into one single bar or button bar or what is in Bootstrap terms called a button group.
Let's look at how we go about constructing something like this in Bootstrap code.
Here I have both the browser window and my code open side by side.
Let's have a look at how we create this button code.
Taking a look at the code, you notice that the buttons are included inside a div here.
To the div, we apply the class, btn-group.
If you have a group of buttons that you want to join together and present as a group of buttons, as a bar of buttons, then you would use a div with the button group class and the role as group here to that div.
Now inside that, you will notice that I am using the ,a, tag to define the three buttons.
Let's look at how we define the three button.
Let's look at how we define the Call button.
This particular line defines the Call button.
I say ,a, role is equal to button.
This ,a, tag here, I am using it as a button here.
That's why I specify the role as a button.
This is important.
And then look at the classes that I am applying to this.
The first one is btn class.
The btn class is the Bootstrap's button class.
It will display that as a classic Bootstrap button.
The second part say is btn-primary.
This is what defines the color of the button here.
In this case this button color is blue.
This is the primary color in Bootstrap. btn-primary.
And then after that, look at the use of the href here.
Since this is an A tag, I can use an href attribute in that A tag.
The href attribute points to the telephone number.
And then following that you notice that I am using a font icon here for the phone.
That's why I have i class fa fa-phone and then after the word call.
This is what enables to construct this blue button, that is included in this button bar here.
Similarly, the next one, you notice that this also says role button.
And then as you go through, you see that btn-info.
Btn-info gives it a color of a light blue in color.
By default btn-info refers to a light-blue colored button here.
And then, you can see that I have the Skype defined here.
And then the third one which, is a green button there with email.
Notice that I specify letters a role = button class = btn btn-success.
When you say btn-success, that will be a green button here.
You have some colors that are already defined in Bootstrap.
Primary refers to blue in for the first, light blue success refers to the green color, then you have warning which would be a pale yellow color, and then danger, which is a red color.
o, these are default colors that were set up in Bootstrap.
And then the href setup, with the mailto here, and then following that, you have the.
Font as icon here and then the email there.
This three e tags, which are currently acting as buttons, are enclosed in side those div, which acts as the btn-group.
That's how we display a group of buttons in Bootstrap.
If you just want single button, all that you need to do is include only one of these lines there.
You could also use the button tag. If you use the button tag, then you don't need to specify the role, instead you just say type button.
Because a button could also act as a submit button there.
Later on, in forms we will look at the use of the button tag, to create a button to be included in our form.
Continuing with the exercise, our next step would be to start, developing the form that we're going to include in the contactus.html page.
We'll do it step by step, so that in each step we learn a little bit of how you include some elements into their form.
As a beginning, when you go to the contactus.html page, right there, you'll see this statement called, form goes here.
Now, what I'm going to do is to change this from col-sm to col-md, so that for extra small to small screen sizes, my form will be laid out occupying the entire breadth of the screen, because it uses col-xs-12.
But from medium size screen onwards, it'll occupy only 9 out the 12 columns.
Let's start constructing the form.
What I'm going to do is, I'm going to replace this, with my first chunk of code.
We're going to include two fields into our form, for the first name and last name of the user.
Let me add in the code, then we'll look at the result.
And then, we'll come back and examine the code.
Adding in the code at that point, as always this code snippets is in the instructions.
Let me save the changes.
And then we'll go back and look at what this form looks like in the browser.
Taking a look at the form, you'll see that they have now two themes in the form here.
The first one, has a label on the left side saying First Name and the then you have the input box here.
And then the Last Name, and then an input box here.
Now you notice also that this form is laid out, so that this part occupies the semi part of the screen, and the remaining part being occupied by the remaining part of the screen.
You're beginning to wonder, how do we go about doing this?
Does Bootstrap grid help us to decide on these sizes.
That would be a very good question for you to ask yourself.
Let's see the code and understand how it looks like.
Before we do that, let's take a look at the same forms layout, in the extra small screen size.
Switching to the extra small screen size.
We'll go to Galaxy S5.
You notice, how the form is laid out in the extra small screen size.
You'll see that the label is on top, and then the box itself, input box itself is the bottom, similarly for the last name.
You notice that Bootstrap. by the way, it provides those form classes.
Automatically, makes your form responsive, so that when it is laid out on different screen sizes, the form will be appropriately laid out, so that it won't get all squashed up on small screen sizes.
But for larger screen sizes, because you have larger real estate, you are able to stretch the form, to make use of the extra space that you have.
Taking a look at that source code, and the form side by side, obviously the first thing that you notice, is that your form begins with the form tag here.
So, form and then the closing form, tag here. Inside there, you are describing the various parts of your form.
Let's take a look at how the first name is constructed, the last name obviously as it looks like should be using a similar approach.
In default, what you notice is that, there is a div here. Div element here, with the closing div here.
This div element has a class called form-group.
And then followed by a row class.
The form-group class essentially, says whatever is inside this div will be treated as a group of elements.
And then they will be laid out accordingly.
And the second part, you see the use of row here.
You'd see that the Bootstrap group's row comes into play here.
This particular form group, can be laid out using the row and the column classes that you have from the Bootstrap grid.
Now, if you apply the row to this div, whatever is inside there, you can use the column classes, to exactly decide how much of space each of them is going to occupy on the screen.
That makes it clearer, so those form group encloses. This unit.
We're going to see this repeat over and over again when we are designing the various elements of the form.
Then, below that, you see this label tag here.
For the label tag, there are certain attributes that have been assigned to it.
You see that the label tag uses a for firstname.
This label is for something with the id firstname.
Which is the input box that follows right below that.
We're going to look at that in a short while.
And then look at the classes that are applied to the label class, col-md-2.
Meaning that for medium to extra-large screens, this particular element is going to occupy 2 columns of the space.
And then note the other one. It says, col-form-label. The col-form-label essentially specifies that this label should be positioned to be aligned with the other element that forms part of this form group.
In this case, the input box.
This also means that the label be lined up in the middle, horizontally with the input box. That is why we use the col-form-label class. If you don't apply this, then your label will be aligned to the top of your input box. Which your form will not look that great on medium to extra-large screen sizes.
Now, on the left side, of course, because this browser window is squashed, so it is showing the view in a small or extra small screen size here. That's why you see the label stacking up on top of the input box here. This is the label that specify.
If you have a label that you want to assign to an element, that is how you're going to assign the label. Down below here, you see a div class col-md-10. This occupies the remaining 10 of the 12 columns. Two columns that are occupied by the label. And the remaining ten columns occupied by this, but is enclosed inside the div. And inside this div, you see that there is an input tag element there with the type text. Which means that this input box accepts text input. And the class, look at the class here. It says form-control. This is important to apply to the input box here. So form-control, and id firstname. And the name which is firstname. Then placeholder First Name. The placeholder is what appears inside the box as a placeholder for the input box. All these attributes are assigned. More importantly, note the use of the form-control class being applied to input type. This is how you structure these two elements in your form. For small screen sizes and below, it stacks the two things. But for medium to extra large, you saw that it is positioning them horizontally side by side. The same thing applies to the lastname code also. It'll be very similar to how the firstname is structured. I would like you to spend a little bit of time taking a look at this code also. So that you see, based upon your understanding of this, how this is also formatted.
The next kind of formal event that we will add in is an input group element. Let me add in the code. We'll look at what the form turns out to be.
And then we'll go back and examine the code. Right here, after the second div, after the lastname field, I'm going to include the code for the next element here. Then let's save the changes. Then, immediately, you would see a couple of more things added into your form. You see a telephone number field added here. This, from the look of it, you see that this is very similar to that. I'm not going to explain the code for this. This should be very straightforward for you to understand. And then this email field also should be very straightforward for you to understand. Because this looks very similar to the lastname. Except that for this, the input field, the type will be set to email. That the built in form checking capabilities of your browser automatically kicks in. So that when you type in something that doesn't look like an email, then it'll complain appropriately. Let's examine this particular part of the form here. Note that in this case, we are adding in left parenthesis and the right parenthesis to this particular input box. How do you add in things into your box like this? Taking a look at the code here in your editor, you see that you still have the form-group row which you already understand. And down below here, you have input type form element id telnum, and so on, which also should be very clear to you.
I don't think I need to explain that part to you. Notice how I am using the Bootstrap's grid column classes to each of these. The label is given col-md-2. And then the telephone number one is given col-xs-7 col-sm-6 and col-md-7 here. That way, the telephone number, this element is properly positioned. But, in particular, let's pay attention to this part. This one here is inside of this div. So inside this div, notice the class given to it. The class says input-group. Essentially meaning that whatever is inside this div will be treated as a group of elements here.
That's why the class given is input-group. Now, for adding in something like this, you will use a class called as input-group-addon. And then notice that I am using a div to hold that item. I can use anything here, but a div comes in handy here. So I say div class input-group-addon. And then the closing div type inside, where, notice that I have the left parenthesis. So this is what allows you to add in some extra appendage to your input box here. Similarly, the one below here is also an input-group-addon right parenthesis. So that is what adds the other right parenthesis here. Now, between these two, of course, you have the input type. The input with the type tel and class form-control, id, name, placeholder, everything in place here. This is nothing but the area code part. If you use this input-group together with input-group-addons like this on either side. Those things will be added in to your input element like this. That provides you with a nice way of designing Your form with some added in.
For example, if you have a field that is accepting money as the input, you could simply add a dollar sign to the left hand side to indicate to the user that that is a field that takes currency value at the moment.
Right now in this case, this field takes in an area code.
And if you see how the area codes are written in the United States and Canada, you know that they are enclosed inside left and right parenthesis.
That's what allows me to specify something like that in my form there.
My next set of elements that I'm going to add to my form are a checkbox and a select.
How do we add that?
If you are familiar with HTML forms, you understand how select works and you understand how checkboxes work in HTML forms.
Now, Bootstrap gives you some additional classes that enable you to format these elements appropriately.
Let me add in the quote.
Let's save the changes.
Take a look at what this results in the form here. And then have a look at the code.
Here, you see that I have a checkbox and some message here.
And then this is a selector which allows me to select among a set of choices here.
Now the form as it exists here is what you will see in small and extra small screen sizes.
Let's take a look at it on a larger screen size.
The same form when laid out on medium to extra-large screen sizes will look like this.
You can see how the contact telephone number is positioned here, and email is positioned here.
Notice that these labels are lined up to a line in the middle with the boxes here.
That is what the col form label class achieves first.
Now, let's concentrate on this that we just added in.
Here, we see that we have a checkbox added in. And then, a text field here.
May we contact you?
For example, you would expect the user to either check it on and off.
What is the reason for a checkbox?
Similarly, you could have radio buttons.
Bootstrap supports radio buttons that are available in HTML forms.
And provide some classes for styling them properly.
And then this is of course the selector which allows you to select among choices.
Going back and looking at the code.
Let's see how this are implemented.
Coming back to take a look at the code,
you see that this one is again a form group row div here which encloses two things here.
One is a form-check col-md-6 offset-md-2.
This is what encloses a checkbox inside this div element.
And then down below here I have a div class, Col-md-3 offset-md-1.
Notice that here, this says form-check col-md-6 offset-md-2.
The reason why I'm doing an offset-md-2 is I don't have a label.
I was typically using two columns for the labels.
Since this checkbox should align itself to the right side in the form.
That's why I used offset-md-2 here.
And then inside here it says label class="form-check-label".
And then it provides input tag here with type checkbox.
That's how you create a checkbox.
And then the class, the Bootstrap class that you're going to apply to your checkbox is form-check-input.
And then the name and the initial value is empty.
And then, this one is the actual label that you see being applied to that particular checkbox there.
Notice how these two are enclosed inside a label tag here.
This is how you create a checkbox together with its label and then position that in your form here.
This here uses form-check-label.
And then in here, you have to have a checkbox, input type="checkbox", and then label itself.
Here you see strong, May we contact you?
That's why it is displayed in bold letters right next to the checkbox here.
Now below in the code, you have a div class col-md-3 offset-md-1.
This occupies three columns within one column offset.
The total of four columns here.
This one is col-md-6 plus 2, so that is eight columns.
8 plus 4, 12.
That takes care of your 12 columns for your grid there.
Now inside this, you see a select applied here.
Now this is the select option that HTML file forms support.
And look at the class applied to this.
It says class="form-control" to the select. And then you give the options in the select here.
So <option>Tel., Email and so on.
This is how you specify the options for your select field in your form here.
This is the use of select and checkboxes in your form.
Similarly, if you check Bootstrap's documentation you will see the use of radio buttons and other form elements.
Taking a look at our form, we now see that we have many of the things that we need in our form already. You have a first name and last name. So this form is something that we construct to enable users to submit feedback to the restaurant.
Here we have first name, last name and contact telephone number and then an email.
And then of course, an option to allow the user to see whether they can be contacted or not.
That is implemented using a checkbox and a selector here. Now, the only thing left over is a submit button for us.
We will add in a submit button to this form and then take a final look at the form.
Before we add a submit button, maybe we want to provide a box for the users to type in their feedback.
In this case, I'm going to make use of a text area for providing that.
Let me paste in the code. And then we'll review the code here.
This code, as you see says, div class="form-group row" which you already know what it means.
And then this is label which you already know how it is constructed. And down below it, you see a textarea tag being used for the form.
It says, textarea class, with class="form-control", which you have already seen before. And then id, name and then the number of rows for the text area being specified here.
Let's save the changes and take a look at the form.
Taking a look at the form, you see that along with this, right below here, you have a big text box into which feedback comments can be typed by the user.
Your form has first name, last name, telephone number, email, and an approval for contacting the user, then a feedback box.
The last thing would be the Submit button.
Finally, let's add in a Submit button to the form.
After a div, on the text area, I'm going to paste in the code for the Submit button here.
Pasting in the code for the Submit button again, looking at the code, you see that this is a div class ="form-group row">, which you already know from before.
And then this says, div class="offset-md-2 col-md-10">.
You understand what that is and then, inside this div, you see a button being enclosed here. Now since we have seen the construction of a button using the a tag, let's pay attention to how you construct a button using the button HTML tag.
If you are using the button HTML tag, then you say button and then the type is submit.
This is going to act as a Submit button for my form, so that's why I said the type is submit.
You set the type to button, it will act as a normal button here.
And then to this I say, class button, button primary.
This is a blue colored button and then the button contains this text inside the button to send the feedback text inside the button.
Let's save the changes.
This is would be the last modification to my form here.
Let's save the changes and then go and have a look at the button.
Returning to the browser, you now see that in your form right below, you have the Send Feedback button.
When the user fills in the form, they'll click on the Send Feedback button to submit the feedback to the company.
This completes the design of a form.
This is one such form that you can include.
There are many more classes that are available in Bootstrap for supporting forms.
I would strongly urge you to consult the form documentation to see the other kinds of classes that are available for constructing default.
If you have conceptually in your mind a form that you want to construct, then you just look up all the different possible elements that you want to include in the form, and then design the form accordingly.
More important thing that you've noticed /in constructing the form using Bootstrap, is all the Bootstrap classes that are available.
The form control, the form group, how you use the row and column classes.
And all these different classes that are supported in Bootstrap to design forms, the Bootstrap movie.
Last set, do the git commit, so, we will bring up the git page.
I'm going to comment the changes that I have done to the about, contactus and index.
And then say Bootstrap buttons and forms, and then that would have committed to my git repository. With this, we complete this exercise.
Here we have learned how we include buttons and form elements into our Bootstrap design pitch.
In this exercise, we will examine user input for a website through the use of Buttons support in Bootstrap. At the end of this exercise, you will be able to:
-
Create, style and activate buttons in a web page using the button classes
-
Use a Button Group to group together related buttons.
contactus.htmlZIP File
Download file
-
Download the contactus.html.zip file given above, unzip it and move the contactus.html to the conFusion folder. This file is already pre-formatted with some content.
-
Set up the links in the navigation bars for all the three pages, index.html, aboutus.html and contactus.html so that we can navigate from one to the other with ease.
-
Also set up the links in the footer correctly to point to the appropriate pages.
- We are now going to add content to contactus.html file to learn more about buttons and button bars. Go to the div where we specify "Button group goes here", and replace it with the following code to create a button bar containing three buttons:
<div class="btn-group" role="group">
<a role="button" class="btn btn-primary" href="[tel:+85212345678]{.underline}"><i class="fa fa-phone"></i> Call</a>
<a role="button" class="btn btn-info"><i class="fa fa-skype"></i> Skype</a>
<a role="button" class="btn btn-success" href="[mailto:confusion@food.net]{.underline}"><i class="fa fa-envelope-o"></i> Email</a>
</div>
Note how we define the button bar using the btn-group class, and then add the three buttons using the <a> tag. In this case, the three buttons are hyperlinks that cause an action and have an href associated with them. So we decided to use the <a> tag instead of the <button> tag. Note how the <a> tags have been styled using the btn class.
- Remember to do a Git commit with the message "Buttons".
- We have learnt how to add buttons and button groups to a web page.
Now that we have seen how to add buttons to our web page.
In this exercise, we're going to look at forms and how we can add forms to our web page and also style these form elements using the Bootstrap classes.
Going back to contactus.html page, scroll down until you see this comment there called "Form goes here".
We're going to replace this with the form in this web page.
Let's delete that and then construct the form in that particular location inside the div there.
To get started with the form, I'm going to use the form HTML tag and construct the form within this HTML tag.
Within this form tag, let's add in the radius elements of our form.
Inside this form, I'm going to divide this form into several rows there.
To divide your form into rows, you can simply use a div with the class="form-group" and then apply the row class to it.
With this, we are going to add in two form groups here.
I'm going to copy this and then paste it down below here.
You can see that I'm going to add two rows to this form here.
To add an item into this form, we're going to this div and then I will start out by using a label tag here.
And for the label tags, so I will have two rows; one allowing the user to fill in their first name, and the second one for their last name.
This is where we are going to use that label to specify the class there.
In addition, Bootstrap allows us to use the Bootstrap grid to specify how these forms are going to be laid out ad so I will apply the col-md-2.
You can see that I have applied the md-2 column classes to this particular item.
This item in the form will occupy two columns.
Inside this form element, we have divided each row into 12 columns.
Because we have already used the row for the div, so that'll provide us with 12 columns inside the div there. In addition,
I have to apply the class col form label to this.
This is what allows me to specify a label here.
For this label, I will fill in the label as a first name and then close the label tag.
This label tag allows me to give a label, which will occupy two left columns in this particular row.
On the right side, I'm going to use another div that the class applied as col-md-10. Notice that the earlier label used the col-md-2 there.
For this div, I'm going to apply the col-md-10 there.
And then inside this div, I'm going to apply an input element, which is of the type text.
If you are familiar with the forms from HTML, you'll see that we are using the form elements from HTML to create that form here so the input box here is of the type text.
This is where we are going to apply the Bootstrap classes to this and the corresponding Bootstrap class for this is form control and then I can specify an ID for this as first name.
Notice that this ID matches this label for div.
First name, and then name as first name and also I will specify a placeholder for this so let me use the next line here, placeholder as, I'm sure from your knowledge of HTML, you understand how this specification is done here.
With this, we have now created our first form element in our form.
Let's take a quick look at the web page. Going to our web page, you can now see how adding in the form elements has created this input textbox and the label on the left side.
Now, I'm going to add in another row with the last name.
Going back to my contactus.html, let me simply copy this part and then paste it into the second div here, and then go in and edit that.
From first name I change that to last name. Make sure that you complete all the edits correctly.
Even one missing improper edit, will cause your form not to work correctly so make sure that all the first name things here are replaced by my last name.
The last name, md-10 text form control.
The ID here should be last name and the name also should be last name and the placeholder again the last name so this should add in a second row with the last name.
Going to your web page, you can see now the form slowly getting into shape so you have the first name and last name.
Now, let's next add in an input elements.
We'll see how this works as we add in the code.
Moving now to the next part of the exercise, here we will add two more fields into our form here for entering the telephone number and the email ID.
Since the basic structure of the code is similar to the first name and the last name that you have already added to the form, so I'm just going to copy the code from the first name and the last name and then paste it in here and then modify the code accordingly.
I have pasted the code from the first name and the last name here.
Let's go ahead and now modify this to turn it into fields that enable the user to enter the telephone number and the email ID.
For the telephone number, so here we already have the first name and the last name above.
The third one, I'm going to change this to label for "telnum".
This is from the telephone number and then the classes, I'm going to apply a col-12 class to this saying that this label will be in its own draw when the form is shown on extra small to small screen sizes.
And then, for medium to higher screen size, this would be displayed in two columns of that particular row here so that's the change that we will make there.
And then also, the label itself, let me change that to contact telephone number, contact Tel.
Now, the telephone number itself, we will let the user enter it as two parts; one, which is the area code and the second one, which would be the actual telephone number.
I'm going to take this part of the code, which was the input field that we had for the first name and then create another one down below here, which I'm going to use for the telephone number itself.
And now we will turn this first one into the field for entering the area code.
You could also use it for example, for country code if that's what you wish to put in the form.
For the area code itself, I'm going to apply for the div, the classes="col-5 col-md-3 here".
Notice that for the medium screen, we have two columns occupied by the label, three columns occupied by the area code itself and the remaining seven columns I will give it to the text field here.
Similarly, for the area code I say col five.
For extra small to small screens this will occupy five columns and then for the remaining seven columns, we'll let the telephone number feed itself occupied at.
Let me change the next one to col-7 and col-md-7 here.
Now, this field I will change this to tel, input type tel for telephone number and the class is form control, the ID is area code and the name is area code and then the placeholder, I will change this to area code.
And the next part, we will change this also type tel and ID is telnum, the name is telnum and the placeholder, itself, would be tel number.
This will form the telephone number field, which will be entered as two parts; the area code and the telephone number.
We are using, again, the column classes in order to structure how the two parts of the input field are displayed in the form there.
Now the last one, of course, this would be for email ID so the label, I turn that into email ID and then the label itself is email and input type is email.
Now, we change the type to email, which is allowed in HTML so that later on if we need to do form validation, then we know that this field should contain only an email type of entry there, and the ID, itself, email ID and the name email ID and the placeholder. Email.
That's it. Let's save the changes and go and take a look at the updated form.
Going to the form in the browser, you now see two additional rows added into our form.
The first name and the last name be added in the previous part of the exercise.
Here, we have the contact telephone number, which is divided into the area code and telephone number.
Note how we have used the column classes to position these two in the form itself and then the email field here.
Let's take a look at the same thing on an extra small screen size.
When you go to an extra small screen size, you'll notice how the form itself is laid out.
You'll see that the label is on the top and then the field itself at the bottom.
So first name, last name.
Note how the contact telephone number entry fields are positioned using the column classes, so the area code here, and the telephone number, and then the email ID here.
Now, we'll continue with the exercise.
Continuing in the next step, we will add in a checkbox and then thereafter we will add in a select two or four.
To add a checkbox, let's just copy this form group here so that we will add it as another row here, and then add in the form group div here, and then close off the div here.
And then inside this form group row, so this gives us one more row in the form.
Inside this form group row, let me add in first the checkbox.
To do that, we'll add in a div with the class="col-md-6" so you'll see that this is going to occupy six columns in the medium to extra-large screen size, and then offset-md-2, so this will offset it to the right by two columns and then display the checkbox in there.
Now, inside here, to add a checkbox, we'll say div with the class="form-check" and inside this form-check class we'll add in an input type="checkbox" and the class="form-check-input" and then let me go to the next line and then say name="approve" and the id="approve" and the value is an empty string there.
And to this checkbox, let's add a label.
To add a label, we'll go and add in label class="form-check-label" and then this label is for this checkbox that we just added.
That's why we'll say for="approve" so notice that for the checkbox, we had given the name and the ID as approve so that's why here, we'll be save for the label for approve.
And then inside this label, we'll specify the content as 'May we contact you?'
And then save the changes and let's go and take a look at our form.
Going to the web page, you can now see that we have added in a checkbox along with a label here and notice that this label is in bold because of the use of the "strong" tag there, and we did offset-md-2. So that's why we push this checkbox all the way here.
This doesn't have a label here but instead this is pushed right here, so that's the reason for using offset-md-2 here, and this one occupies md-6 so six columns here. We are not done with that yet.
I'm going to add in the next part here, which is a select box there.
I will apply one more div here with the class="col-md-3 offset-md-1" here.
And inside this div, I'm going to define a select.
From your knowledge of HTML, you know what a select does for you.
Now, the select will apply the classes form control so this is Bootstrap class that I'm applying to the select here, and close off the select.
And inside here, I need to give the options for the select.
I'm using a simple select here, and so the first one is an option for telephone or email and close off the option.
This creates a select element in my form, which has two options; telephone and email, so, let's save the changes.
Taking a look at our web page, you can now see how the telephone and email select box is now created here so this allows me to select which one to do and then you can also check the checkbox like this.
This finishes the next row. Let's add in one more row, which will allow the user to actually type in their feedback.
I will use a text area for formatting that. For the next one, I'm going to use a text area.
What I'm going to do is I'm just going to go up and copy this email part of it.
I'm too lazy to keep typing in everything all the time.
I tend to do cut and paste wherever feasible, but for this one, the label should be feedback and the column form label, and then the actual text is, "Your feedback here." So that is the label.
And then, in here, the second one, I'm going to format this one. Instead of input type, I'm going to change that to a text area, and then I don't need the type there.
Text area, the class is still form control and the ID is feedback.
Name is feedback and the placeholder is not needed here and instead change it to how many of rows I want to give from the feedback for the text area?
I'll say 12 rows and then close off text.
Notice how I have included the textarea in my form.
Save the changes.
Take a look.
Going to my web page, now you see my form taking its complete shape here.
You have the first name, last name, telephone, email there, and then the feedback. The text area of 12 rows.
Now, you will need a button which the user should click to submit their feedback.
Let's add in a submit button to this form.
Going back to the form again, create one more row here by using the div here with the form group row here, and inside here I'm going to add in a button here.
I would say, div class="offset-md-2" because I want my button to be positioned right below all those fields that I have here so the left two columns are being used for the label.
The submit button doesn't need a label so I'm just going to push it to the right here and then I would say "col-md-10" so this would occupy the remaining 10 columns there.
And then inside those div, I'm going to add in a button there.
When you add in a button to your form, use the button tag here with a type submit.
This is the submit button for your form there and class.
Remember button classes, button primary, so this would create a dark blue button in your form and then close off the button there, and then I'm going to simply go in and inside the button, I'll give the name as "Send Feedback" and then save the changes.
Now, our form is complete.
Let's take a look at the final version of our form.
Going to our web page, you can now see the form completed.
All these fields we have seen already, the button at the bottom with the wording "Send Feedback" and the dark blue-colored button because of the use of button "primary".
This completes the form that we wanted to create in our web page.
With this, we complete this exercise, where we have seen how we can construct a form and include it into our web page.
You'll be working with forms in some of the later exercises including your second assignment.
This is a good time for you to do a good comment with the message forms.
In this exercise, we will examine user input for a website through the use of Forms support in Bootstrap. At the end of this exercise, you will be able to:
- Design a form using various form elements and style the form using Bootstrap form classes
- We will add a simple form to the page at the location identified by "Form goes here". Add the following code to page to create a simple horizontal form with two fields:
Insert the following:
<form>
<div class="form-group row">
<label for="firstname" class="col-md-2 col-form-label">First Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name">
</div>
</div>
<div class="form-group row">
<label for="lastname" class="col-md-2 col-form-label">Last Name</label>
<div class="col-md-10">
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name">
</div>
</div>
</form>
This creates a form with two elements in the form. Note that the class row in the form enables us to use the Bootstrap grid system. Hence we can style the contents using the column classes as appropriate.
- Let us add fields to seek user's telephone number and email:
Add the following:
<div class="form-group row">
<label for="telnum" class="col-12 col-md-2 col-form-label">Contact Tel.</label>
<div class="col-5 col-md-3">
<input type="tel" class="form-control" id="areacode" name="areacode" placeholder="Area code">
</div>
<div class="col-7 col-md-7">
<input type="tel" class="form-control" id="telnum" name="telnum" placeholder="Tel. number">
</div>
</div>
<div class="form-group row">
<label for="emailid" class="col-md-2 col-form-label">Email</label>
<div class="col-md-10">
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Email">
</div>
</div>
- We now see the addition of a checkbox and a select element to the form. Note the styling of these elements using Bootstrap classes:
Insert the following:
<div class="form-group row">
<div class="col-md-6 offset-md-2">
<div class="form-check">
<input type="checkbox" class="form-check-input" name="approve" id="approve" value="">
<label class="form-check-label" for="approve">
<strong>May we contact you?</strong>
</label>
</div>
</div>
<div class="col-md-3 offset-md-1">
<select class="form-control">
<option>Tel.</option>
<option>Email</option>
</select>
</div>
</div>
- Next we add a textarea for the users to submit their feedback comments as follows:
<div class="form-group row">
<label for="feedback" class="col-md-2 col-form-label">Your Feedback</label>
<div class="col-md-10">
<textarea class="form-control" id="feedback" name="feedback" rows="12"></textarea>
</div>
</div>
- Finally, we add the submit button to the form as follows:
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Send Feedback</button>
</div>
</div>
Note the declaration of the type for the button to submit.
- Remember to do a Git commit with the message "Forms"
We have learnt how to add a form and style the form using Bootstrap form classes.
contactus.html
-
The Difference Between Anchors, Inputs and Buttons (Semantic differences in the usage)
-
When To Use The Button Element (The multifaceted button element)
In this lesson we will be reviewing the support for tables in Bootstrap. In addition we will look at a versatile component called card that enables the display of content in myriad ways. At the end of this lesson you will be able to:
-
Present and style tabular data in a table form using Bootstrap support for tables
-
Display content using a card on a web page.
Let's briefly discuss about bootstrap tables.
What does bootstrap bring to styling tables that we include in our web pages?
We'll also look at another bootstrap component called as bootstrap card, which is a very versatile component for displaying content.
There may be many occasions where you want to present tabular content on your web page.
Tables were essentially designed for that purpose, but soon thereafter web page designers hijacked tables into using for designing and laying out content in the pages.
Because inherently, the original HTML did not have the ability to properly lay out content in a web page. Of course, with the arrival of grid-based layouts like the bootstrap grid, the tables have been turned on tables. And increasingly, people are preferring not to use tables as a main sort of building content layout in web pages.
Grid-based layouts are better designed for this purpose.
Here is an example of what we can do to a standard HTML table by using several classes that bootstrap provides for styling tables.
Here, you can see that the set apart by displaying it in darker color and then the rows themselves are highlighted by displaying alternate rows with different backups.
The table used in bootstrap based that page is similar to how you use tables in standard HTML pages.
But of course, you apply the class table which is supported in bootstrap to a standard table tech.
In addition, bootstrap provides many different classes for styling tables like, table striped for zebra striped tables as we saw in the example earlier.
Similarly, we have table bordered for borders. Tables, table-hover, table-sm for tables with cell padding cut in half.
And similarly, table-responsive can be applied to a div around tables, so that the tables can be made responsive where it is shown on smaller screen sizes.
The tables will then be able to scroll horizontally and vertically.
Also, you could apply backgrounds to individual row of tables or entire tables themselves. Here are a couple of examples of how you could apply a background color to a particular row or a particular cell in table.
Another versatile component that is available in bootstrap is a bootstrap card.
Sometimes, you may want to highlight some content on your web page.
This is where bootstrap comes come to your aid.
In Bootstrap card is a versatile component that allows you to display content in myriads of ways.
You would notice that it allows you to have headers for cards. You can also include images in cards.
You can include images in the background of cards. You can even change the background colors of cards. Many features are supported by cards.
Here are a couple of examples of cards that we will see in the exercises later.
We will also see more versatile us of cards in later exercises and other courses in this specialization.
Card is a very important company that can be effectively used for displaying content. It's time to move on to the next exercise where we will use tables and cards to display some content in our web page.
Our next exercise looks at ways of displaying content on our web page.
They look at how we can include tables into our web page and how we can style those tables using Bootstrap's classes for styling tables, including responsive design of tables. We'll also look at another versatile component that is available in Bootstrap called as a card.
A card allows you to display content in millions of ways.
We'll look at two different ways of using a card to display content.
Later on, we will see the use of cards again and again for future designs of certain parts of our website.
To get started, open the aboutus.html page.
We are going to insert a table and two cards into the aboutus.html page to display some card.
First, let's slowly scroll down until after that card for leadership information, and right there I'm going to introduce another div within which I'm going to enclose the table here.
I will introduce a new row here, with the class as row row-content.
And inside this div, we will introduce a column that will host the table here.
I will introduce a column, column 12, column sm-9 and close the div. And inside div, let me give a heading here Facts and Figures and close the h2.
Right after that, let me introduce another div, that the classes column sm and column sm-3 and close off that div there.
Right now we're going to leave the second div empty.
I'm going to fill in the table into the first div here and then we'll take a quick look at the table after I add in the code for the table.
Here I have listed in the code for the table.
Let's take a quick look at the table and then we'll come back to discuss this code here.
Going to our About page that we already have been working on from earlier, after the Corporate Leadership section, you see a new row here introducing the table.
Note how the table is styled, so we have the header with an h2 included there, but let's concentrate specifically on this table.
You see that this table has been styled using some Bootstrap classes that are used to enhance the table.
The header has been rendered with a dark background, and then the rules are all designed in such a way that alternate rows are in different color so that you can clearly distinguish the rows of this table.
This is what in Bootstrap terms is referred to as striped table.
This is one example of how you can style a table. Now interestingly, if you look at the same table in a small device, you would notice that the table is still visible except that this table now becomes scrollable.
Whatever can be displayed within the content will be shown and the rest of the table can be scrolled horizontally in place.
This is the responsive component of Bootstrap's support for tables in action.
Now let's go and take a look at the code itself.
Now obviously this table is fairly straightforward, it has a bunch of rows and some columns.
You'll be expecting me to use the typical th, td and tr tags there.
Switching back to the code, you'll notice that I am enclosing this table inside of div to which I have applied the class table responsive.
This is what makes this table responsive so that on smaller screens you can horizontally scroll the table.
Now for the table itself, notice how I have applied two classes.
One is the table class, so this is overriding the default table rendering on browsers by providing Bootstrap's own classes.
And the second one says table-striped.
This is what designs a table with alternate rows in different colors here.
Then the head itself, so you can see that the headers described here with the class thead-dark, so this renders the head dark.
And then you'll see the table draw itself described here with the th tags here.
This is standard table definition.
The body of the table itself is standard html use of tr, and td, and th elements that you are already familiar with in html5.
This is what the table is constructed with, and then you close the table body.
We all that is unique about Bootstrap itself is the application of this specific Bootstrap classes to the table element itself to style it further, to fit into a Bootstrap design web page.
The next component that I'm going to add into the aboutus.html page is a card component in Bootstrap.
The card component allows us to display content by setting it apart from the rest of that content.
Now here, scrolling to the first row here, there we have our history in the second div use, notice that the first div is already occupying col-sm-6, the second div is currently empty.
To this div, I will add in the class as col-sm.
Thereafter, going into this div I will introduce another div to the class card here.
Inside those div, I'm going to build up my card to display some content here.
In this div, we will introduce a h3 that the class as card-header bg-primary.
You'll see that this h3 will be displayed as a card header with that background as primary and then text white which Bootstrap class will define the text to be white in color.
And then inside this h3, I'm going to introduce the title for this card here which is 'Facts At a Glance.'
That I can show some content inside this div here.
Now, to this card, next I'm going to add in another inner div here with the class as card-body, and inside this card-body will be the actual content that have been displayed in this card.
Let's save the changes and then go and have a look quickly at our web page.
Going to our web page, we can already see the card taking shape in our web page, so you can see that the left half is occupied by the History and the right half you'll see the card put into place.
Let's add some content into this card.
Going into this card block, now I'm going to use a description list and this description list in Bootstrap allows me to apply the row and column classes to it and thereby format the content inside.
Inside this description list, I'm going to add in the dt that the class and col-6 here, so meaning that this is going to occupy six columns inside this description list which itself is a row here.
Nesting as you see coming into picture here.
To this dt, I am going to add in so this description title here, and then below that I will add in the dd with the class col-6 here and then I can add in some context here.
And dd here.
Let's save the changes and take a quick look at our card.
Going to our card, you can now see how the description list allows me to display information. Inside my card, you can see the left side and the right side clearly displayed.
Here we are taking advantage of the description list and, adding in the information there.
Let me finish up the remaining parts in here by adding in the code, and then come back and take a look at the final version of this card.
Here, you can see that I have completed adding in the remaining parts of my description list.
Let's go and take a quick look at our final version of that card.
Taking a look at the card, and how it is taking shape.
Here, you can now see how we can make use of a card to display some content in our web page and set it apart from the rest of the content to the Web page.
A card is a very versatile component that allows us to display content like this.
Let's continue with this exercise, adding in another card to this web page.
Let's now again go back to our aboutus.html page.
And right below the card that we have already added previously, I'm going to add in another div with the class "col-12" here.
And then, inside this div, I'm going to construct another card here to display some additional information.
Inside this div, I will construct a card with the class "card card-body bg-light."
You'll see that I am applying both the card and the card-body to the same div here.
Which means that this particular card is not going to have any card header but instead just contains the card-body here.
And then, also, the bg-light means that the background will be in faded color.
Somewhat of a grayish color added to the background.
This also seeks this card apart from the rest of the content here.
Now, inside this card, I'm going to make use of a block code to display some interesting little funny piece of information there.
I will use a blockquote.
This is also an HTML tag here.
And then to this, I will apply the blockquote class of Bootstrap.
Bootstrap styles this blockquote in its own way.
Let's close up that blockquote.
And inside this blockquote, I'm going to include a quotation here.
I'll start with a p, and apply a class called mb-0.
The mb-0 is a utility class that Bootstrap provides.
What this means is margin-bottom zero.
For this particular, whatever it is included in this p tag, we'll have a bottom margin of zero.
And this helps me to display the content correctly here.
Here I'm going to add in the actual content there, and then close this p.
This p contains the actual quotation.
Now, to this quotation, so you see that in your content, you can also include quotations in your code there.
To this, I can also add a footer with the class.
Let me push the footer indentation.
This footer is also a class that blockquote supports.
Whatever you include in the blockquote, together with the footer, will enable you to display the author of this quotation.
Here I am including the author, and then one more.
Using the cite, I can even cite the source of this quotation.
You can see that.
Again, this is just some quotation that I'm using just for fun to show you, also at the same time illustrating, how the blockquote works, and also how we can create another kind of card in Bootstrap.
With this, we have added in the code for displaying the blockquote here.
Let me see if that changes, and then we'll go and take a look at how this quotation is displayed in our web page.
Going to the browser, in our page, you can see that our history and the facts at a glance are displayed side by side.
Down below that, I have this long piece of content here.
Let's have a look at the same page in an extra small screen.
In an extra small screen, you can see that the history and the facts are stacked on top, and the quotation is right down below here in its own card.
You can see two cards, one below other here, and then the table itself displayed at the bottom.
The table itself is a scrollable table here.
With this, we complete this exercise.
In this exercise, we learned about how we can use tables and cards for displaying content in our web page.
Now that we have completed this exercise, it's a good time to do a git commit.
In this exercise, we will examine tables and Bootstrap classes for styling tables. We will also examine Bootstrap cards and their use for displaying content. At the end of this exercise, you will be able to:
-
Create, style and present tabular data in tables in a web page using the Bootstrap table classes
-
Display content in a web page using Bootstrap cards
-
In this exercise we will be modifying the aboutus.html page to add a table, a card with some content and a card with a quotation.
-
Let us get started by opening aboutus.html page in a text editor.
- In this part, we will add a new row of content after the Corparate Leadership row in the page. We first start by adding a row and columns to the page as follows:
<div class="row row-content">
<div class="col-12 col-sm-9">
<h2>Facts & Figures</h2>
</div>
<div class="col-12 col-sm-3">
</div>
</div>
- Inside the first column of this row, insert the table as follows:
Insert the following:
<div class="table-responsive">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th> </th>
<th>2013</th>
<th>2014</th>
<th>2015</th>
</tr>
</thead>
<tbody>
<tr>
<th>Employees</th>
<td>15</td>
<td>30</td>
<td>40</td>
</tr>
<tr>
<th>Guests Served</th>
<td>15000</td>
<td>45000</td>
<td>100,000</td>
</tr>
<tr>
<th>Special Events</th>
<td>3</td>
<td>20</td>
<td>45</td>
</tr>
<tr>
<th>Annual Turnover</th>
<td>$251,325</td>
<td>$1,250,375</td>
<td>~$3,000,000</td>
</tr>
</tbody>
</table>
</div>
Note the use of table-responsive class to create a responsive table, and the table-striped and thead-inverse classes for styling the table.
- Next we add a card to the second div in the first content row as follows, updating the div first by adding the classes col-12 col-sm-6 to it and then adding the card:
Bootstrap card:
<div class="col-12 col-sm-6">
<div class="card">
<h3 class="card-header bg-primary text-white">Facts At a Glance</h3>
<div class="card-body">
<dl class="row">
<dt class="col-6">Started</dt>
<dd class="col-6">3 Feb. 2013</dd>
<dt class="col-6">Major Stake Holder</dt>
<dd class="col-6">HK Fine Foods Inc.</dd>
<dt class="col-6">Last Year's Turnover</dt>
<dd class="col-6">$1,250,375</dd>
<dt class="col-6">Employees</dt>
<dd class="col-6">40</dd>
</dl>
</div>
</div>
</div>
- Next, we add a Bootstrap card and include a quotation in the card using the blockquote typography style:
Bootstrap card:
<div class="col-12">
<div class="card card-body bg-light">
<blockquote class="blockquote">
<p class="mb-0">You better cut the pizza in four pieces because
I'm not hungry enough to eat six.</p>
<footer class="blockquote-footer">Yogi Berra,
<cite title="Source Title">The Wit and Wisdom of Yogi Berra,
P. Pepe, Diversion Books, 2014</cite>
</footer>
</blockquote>
</div>
</div>
Note the use of the <blockquote> tag to create a block quote in the card. We can use a <footer> inside the block quote to specify the attribution of the quote to its origin.
- Remember to commit the changes to your Git repository with the message "Tables and Cards"
$ git commit "Tables and Cards"
In this exercise, we constructed a table and styled it with the Bootstrap table classes. Thereafter, we added two cards to the web page. We also saw the use of the description list and the block quote in the content.
In this lesson we will look at the use of images and media on websites. In particular we will review the Bootstrap classes to support the inclusion of images and media, supporting responsiveness of images and media, and the use of these as thumbnails and part of other components, in particular the media component. At the end of this lesson you will be able to:
-
Use images and media and include them in your website
-
Support responsive images and media using responsive Bootstrap classes for images and media
-
Use thumbnails and media components using Bootstrap classes
No self-respect webpage designers, would today design webpages without including some form of images or media on their websites.
Computer science professors are an exception.
At this stage, you are probably expecting me to say this, but that's not what I'm going to say.
I'm going to say that, "A picture is worth $12 on iStockPhoto.com.
Bootstrap provides extensive support for including images and various kinds of media in your websites and your web pages.
The image HTML tag is obviously going to be used for including images in your webpages.
Bootstrap also provides a bunch of classes that you can apply to the image tag in order to further enhance the way images are included in your webpage.
You could use a image class called img-fluid which will make your images responsive, meaning that the size of the image will automatically adjust to different screen sizes.
You can also use an img-thumbnail which will put a white border around your image.
You can also deal with the shapes and sizes of images like you see in this picture here so you can have images for which you create rounded corners, either all the four corners, or any chosen pair of corners.
You can apply the class around it to create an image with rounded corners or you can see a rounded hyphen top bottom left or right to put the rounded corners in any one of these four edges of your image.
You can also apply rounded circle to create circular images.
When you visit websites, you would see images being used in many of these ways already.
You'll remember we saw the Card class in the previous lesson and the exercise. Here, I illustrate the use of the Card class with an image included.
In this case, we include an image with the class card image top and if you include large enough size the image that image will be included at the top and then enclosed inside a card like this.
If the image is too small, then it may be positioned to one corner in your card.
Use a large enough image to be able to define a clean card like this.
Here you'll see the image being described with, the classes applied to that including card image top and img-fluid to make the image responsive automatically.
This is how you can use the images with the Card class to define cards that you use on your webpages.
Another way of including images and related content in your webpages is a media object.
A media object allows you to specify an image that you can position either to the left or to the right of the description.
Also, you can include a media body which contains the description that goes together with the image.
As you see in this example here, the media body itself encloses any HTML formatted content here.
Here I am using an h2 and h4 together with a p class inside the media body to define the actual content.
We will use the media object in the exercise that follows.
You can also do a responsive embed of content.
For example, if you have a video that you want to enclose in your webpage, then you can use an iframe class to frame the video, and then enclose it inside the div with the classes embedded responsive giving sizes so you can 16by9, 4by3 or video, content to be displayed.
Responsive embed, you can use the embed or iframe or video or object HTML tags and then enclose it inside a div.
Applying the embed-responsive and also together with the embed-responsive, specifying the dimensions which you want to use for 4by3 or 16by9 dimensions.
This is how you can also enclose video content in your webpages.
Now, that we have seen the support for images and media, it is time to go onto an exercise where we will look at how we can include images in the webpage or the website that we have been working on.
We'll make some changes to the index.html page by including some images and content using the media object.
Time to move onto the next exercise.
In this exercise, we're going to deal with images, how do we include images in our web pages, and how we can make use of the media object in our web page.
As the first step, go to your exercise instructions and download image.zip file, and then save it to your confusion folder.
And then unzip the file to obtain a folder named, img, and inside that you will find a few images that we are going to make use of in this exercise.
All the images are in png format in that folder.
We are now going to work to add some images to the page.
First, let's add in the logo for our restaurant.
Going to the index.html page, in the Jumbotron, you'll see the second div here got the col-sm.
We you're going to fix that up by adding to this div, and align self-center to this div.
Now, to this div, we're going to add in an image.
Let me use the image with the source, img.
We have already put the image folder containing the images into our project.
From there, I will add the logo.png file as the image here.
In addition, I'm going to add the class as image fluid, so that this image will automatically be responsive and adapt to the screen size.
Let's save the changes. We're going to apply the same change to both aboutus.html page, and also the contactus.html page in the Jumbotron.
Now, when you take a closer look at your web page, you'll find that in the Jumbotron, right after this wordings, you will see the image for our restaurant inserted in there.
Next, we'll go into the navbar, and then where we have this for the navbar brand, I'm going to replace these words for the restaurant with the corresponding logo.
These words I'm going to replace that with img, and source is logo.png. In addition, I'm going to specify a height attribute of 30, and a width attribute of 41 to this logo.
This size is apt for the navbar brand there.
Let's save the changes.
I'm going to go and make the same change in the aboutus.html page, and also the contactus.html page.
Taking a look at the web page now, you'll see the restaurant's name has now been replaced with the restaurant's logo in small size there.
You now see that when you navigate to the About page, you will see the image being included there, and similarly on the Contact page, you will see that the image has been updated going back to the main page.
Now, what we're going to do, is to use a media object in place of these descriptions that we have here, and then use the media object to replace these with the description and also an image to be included.
That gives a better view of our web page.
Let's go ahead and make that change.
To make use of the media object in our index.html page, we will go to the first row of content here.
And then right there in the second div, I'm going to introduce a new dev with the class media, and enclose the content inside this div there, closing off the div.
Now, inside this div, I'm going to introduce an image to be used there.
Here I go in and say image class, and in order to use an image in a media object, we need to apply some additional flex related classes here, so I apply the d-flex, and then mr-3.
So, M meaning margin right with number 3.
That gives sufficient margin to the right of this image, so that the description is slightly set apart from the image in the web page.
And then I will use image thumbnail for this image, and then also use align-self-center for the image, and then type in the source of the image, which is img, and you can look up the image name in the img folder, and let me give it an alternative there, and close off the image.
This will now include the image into my midi object.
In addition, I'm going to create the media body for this image by saying div class media body, and then enclosed this h2 and p that contains the description inside this div there.
Let me indent the content there, and then close off that div here.
With that, my description is enclosed inside the media body.
In addition to this h2, I'm going to introduce a class as mt-0.
With this, this class says margin top zero.
This title will be aligned to the top of this particular media object here.
With these changes, let's save the changes and then go and take a quick look at our web page.
Going to our web page, you will immediately notice the change in the web page.
You can now see that there is an image position here, and then the description that was earlier in that location has been properly positioned here.
Contrast this with the remaining two rows, and you now begin to see how the media object helps us to transform that into something more vibrant.
I'm going to do the same thing to the third row here.
The second row will be left as an exercise for you in the assignment.
Going to that third drill, I'm going to apply a similar change to this third row to introduce the media object here.
Let me introduce the media object there, and then to this div, go into the media object, and then introduce the image that I'm going to use here.
I use the class as d-flex mr-3.
If you are positioning the image to the right side, then you need to give a margin as ml-3 for it. In addition, I'm going to add in the image thumbnail class to this, and then also say, align-self-center.
These are the classes that I'm going to add to this image.
And then, let's specify the source of this image, img and alberto.png, and then I'll specify the alternative.
And after this, this h2 and h4 and the p, I'm going to close them inside a media-body div here, closing off the media body div.
We now have completed the media object in the third row.
Let's save the changes, and then go and take a look at our web page next.
Now, taking a look at our web page, you'll notice that we have the dish description there.
Now, if you move to the third row, you now see how the third row has also been redefined.
Note the use of the media left, meaning that the image is positioned to the left side in this media object, and then media middle page positions the image in the middle of the description.
You can also use media top and media bottom, to align the image to the top and the bottom of this description.
With this, we complete this exercise. In this exercise, we looked at the use of images and media object in our web page.
This is a good time, again, to do a good comment, with the message, images and media.
In this exercise, we will explore the Bootstrap classes to support image and media on a website. In particular, we will look at how to include images on a website, how to make use of images within a media objects. At the end of this exercise you will be able to:
-
Use Bootstrap classes to include a responsive images in a website
-
Use a media object to include images and description on a website
Img.zip
-
Download the img.zip file that we provide above and unzip it in the conFusion folder. This should create a folder named img there.
-
We will now update the index.html file to include images and media objects on the web page.
- We will now add the restaurant logo to the Jumbotron. In index.html go to the header row inside the jumbotron and replace the second <div> column with the following code:
<div class="col-12 col-sm align-self-center">
<img src="[img/logo.png]{.underline}" class="img-fluid">
</div>
You will immediately notice the restaurant logo being displayed in the jumbotron.
- Next, we will add the logo to the navbar where we display the restaurant brand. Go to the navbar and replace the code there for the <a> tag with the "navbar-brand"
<a class="navbar-brand mr-auto" href="#"><img src="[img/logo.png]{.underline}" height="30" width="41"></a>
Note the inclusion of the logo in the navbar.
- Repeat the above two steps for the aboutus.html and the contactus.html page also to update their navbars and jumbotrons.
-
Next we will work with the content on the web page and use the media object classes to style the content in the content rows.
-
Go to the first content row, and replace the content in the second column containing the description of Uthappizza with the following code:
Replace contents of second column:
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center"
src="[img/uthappizza.png]{.underline}" alt="Uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza</h2>
<p class="d-none d-sm-block">A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
</div>
</div>
Note the use of the media class and the related Bootstrap classes to style the content.
- Next, we will go to the third row and replace the contents of the second column containing the description about Alberto with the following content:
Replace contents of second column:
<div class="media">
<img class="d-flex mr-3 img-thumbnail align-self-center"
src="[img/alberto.png]{.underline}" alt="Alberto Somayya">
<div class="media-body">
<h2 class="mt-0">Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin chef with wide
International experience having worked closely with
whos-who in the culinary world, he specializes in
creating mouthwatering Indo-Italian fusion experiences.
</p>
</div>
</div>
- Finally, do a Git commit with a message "Images and Media".
git commit "Images and Media"
Conclusions
In this exercise, we learnt about the Bootstrap classes to support images and media in a web page. We saw how we can include responsive images on a web page. In addition, we saw the use of images within a media object to style and display content.
Exercise Resources
(download this to conFusion, unzip it to create an "img" folder there)
In this lesson we examine various ways of delivering alert information to users. We examine labels, badges, alerts and progress bars. At the end of this lesson, you will be able to:
-
Include labels and badges in your web page
-
Create, style and include alerts in your web page
-
Appreciate the use of progress bars and controlling the state of the progress bars.
You may have several reasons for drawing the attention of visitors to certain parts of your website or maybe you want to alert the users about some information or you may want to keep the users informed about the progress of an operation that they initiate on your website.
Let's look at some different mechanisms that bootstrap provides for these kind of operations. Bootstrap has many different components that enable us to keep users informed.
We have badges which allow us to draw attention of users to recent updates to our web page. We have alert, error, and warning messages that can be delivered to users should they perform operations that are not allowed.
And also, we may use progress bars to keep users informed about the progress of whatever operations that they initiate on our website.
Let's look at this in a bit more detail next.
Badges are an easy way of adding small amount of information to your website to attract the attention of visitors.
As an example, you can see that we have added a couple of badges to this description of the dish here on our main page so you can see that we have the red colored badge drawing attention of the users to the fact that this is a hot item on the menu and perhaps even informing them about the price of the menu.
These kind of small pieces of information can be added to your website using a badge.
A badge for example, the red one here is created by using a span with the classes badge and badge-danger.
You can use the various other colors that are built into the bootstrap framework for creating badges of several different colors.
Similarly, you can use a badge-pill which creates a rounded rectangle as you see here, and that can be done by applying the badge, badge-pill class to it along with the badge class.
Alerts are another way of informing users about information.
For example, an alert can be created using the alert component which simply can be created by applying the alert with alert-warning for example, in this example that you see warning creating a yellow colored alert.
You can apply again danger primary and other bootstrap colors there. And then alert-dismissible class, allows you to include a class there which the user can click to dismiss an alert.
To support that operation, you need to also include a button into your alert as you can see inside this div, we included this button here.
And the contents of the alert can be formatted using standard HTML as you can see here.
This enables us to create an alert on our web page.
To summarize, the Alert can be created by a appling the alert class together with additional qualifying alert classes, which enable you to create alerts in different colors.
We can also include links in our alerts.
We can also make the alert dismissible by using the alert dismissible class and including a cross button inside our alert.
Similarly, progress bars are included in websites to keep users informed about the progress of whatever we have initiated on the website.
For example, if you're uploading a file to a website, then you may want to keep the user informed about how much of the file has completed upload by showing a progress bar on the website.
Creating a progress bar in bootstrap is done by applying the progress class to a div and inside that we can apply another inner div with the class progress bar and also allow that to be further styled by using things like progress bar striped and then you can apply the color for the progress bar by specifying the color as BG hyphen and the color.
In this case the bg-danger being applied to this progress bar.
We can also make the progress part striped, we can also animate the progress bar, and also specify how much of that progress bar needs to be in form.
By changing this width value dynamically you can create a progress bar that will keep updating itself on the web page.
To summarize, a progress bar can be created by applying a progress class to the div and inside there an inner div to which you apply the progress bar class will enable you to create progress bar.
You can even stack multiple progress bars together to create a stacked progress bar and also apply different colors to the progress bar and also can have different appearance for the progress bar using the progress bar striped class and also progress bar animated class for animating the stripes on our progress bar.
Now that we have looked at various ways of alerting users, let's do a simple exercise next and use badges in our web page to draw the attention of users.
In this short exercise, we're going to make use of badges to add badges to our web page, so that we can highlight some information for our visitors to our website.
Going to index.html page, right there in the very first content row, right after the name of the dish there, I'm going to add in a span with the class badge badge-danger.
And then add in the badge information there.
This will add a red colored badge with the word HOT in the badge to our web page.
In addition, I'm going to add in one more badge, which is a badge pill by adding in a badge with a club badge badge-pill, and then create a gray colored badge by using badge-secondary, and include the price of the dish into our web page.
Let's save the changes and go and take a quick look at our web page.
Going to our web page, you can see that by adding in the badges, we have created the red colored badge with the word HOT and then the badge pill with the price of the dish into our web page.
This is a nice way of adding in little piece of information to our web page and highlight that piece of information.
This completes this exercise.
This is a good time to see if the changes to your good repository, with the message alerting users.
In this short exercise we will examine the use of badges as a way of alerting users. At the end of this exercise, you will be able to:
- Add a badge to your web page using the Bootstrap badge class
- We will continue to edit the index.html file. In this file, we will add a badge HOT next to the name of the dish Uthappizza in the first content row. To do this, add the following code inside the <h2> containing the name of the dish:
<span class="badge badge-danger">HOT</span>
- Next we will add a badge as a badge-pill right next to the earlier tag in the web page. Add the following code to the <h2> tag:
<span class="badge badge-pill badge-secondary">$4.99</span>
- Remember to commit the changes to the Git repository with message "Alerting Users".
In this short exercise, we learnt how to add badges to our web page.
Bootstrap Resources
It's time to move on to the second assignment in this course.
This week we had covered buttons, forms, tables, cards, images, and media and then finally we covered badge.
This assignment we'll look at trying to explore your understanding of all these topics.
Your second assignment consists of three tasks. Let's go through each one of them step by step. Your first task is to create a form in your index strategy table pitch.
This is right after the descriptions that we have so use another row with the row content there. Create a card in there with a title.
Reserve a table, and then inside that card, in the card block, include a form.
The form will contain radio buttons.
You can check the documentation for forms to understand how to create radio buttons.
They are fairly straightforward.
We have inline radio buttons all the way ranging from one to six and you will allow the user to select any one of these radio buttons.
Clicking on one of them, will allow you to select the number of guests.
And the second piece of information is date, and the third piece of information is time.
The date and time are going to be supported by two input fields here and then we have a submit button here named "reserve" with the button being in blue color.
Remember all these different details here and this is in a card. Now, this card if it is on a small to extra-large screen size, it will be centered in this row and it will occupy eight columns.
You have two columns left here and two columns left there.
These are some clues about how you're going to position this.
For extra small screen sizes, you occupy the entire screen width, otherwise your form cannot be accommodated meaningfully there.
That's the first task in your second assignment.
If you recall, the left the second draw of our content unstyled, you're going to use the media object now to style this content.
Note in particular that, for the media object your image is going to appear on the right side, so use the right set of classes in order to make your image appear to the right side of the content, unlike the other ones where the image appears on the left side.
And it has to be centered vertically here.
Also, note that you need to include a badge here with the word "new."
And so we have seen this already in the exercise before so this should not be very difficult to achieve.
Your second task, again, is to use the media object to style this through.
The final task in the second assignment, is to create a button here. This would be a block button.
Button block class which you're going to use.
Now, what you can do is you can reposition this content here to occupy half the screen and then these two will like the remaining part of the screen.
And use the words reserve table in there.
Not only that, when you click on this button, you'll be taken down to the form at the bottom of the page, which allows you to do the reservation.
This is where you need to use the HTML ways of specifying IDs in order to achieve this action.
Going back again, this button should be positioned vertically in table and should share the screen space half with your logo here.
The wordings here can occupy the remaining half of the scripts.
You can use the column classes to adjust these things.
Now that you are more clear about your project idea, it's time to conceive how your project is going to look like for the end-users.
This is the time to design the user interface and the flow of your application.
User interface design and prototyping helps you to conceptualize the look and feel of your application.
This can be achieved in two ways: using wireframe diagrams, or using prototyping tools.
We provide links to wireframing and prototyping tools in the additional resources.
The focus in this lesson is to be able to visually represent various UI elements to enable designing your application.
The aim is to deliver an reasonable representation of the end-user experience with your application
At the end of this lesson, you should be able to:
-
Construct a wireframe diagram to visually represent the structure of your user interface
-
Construct a prototype to enable understanding the flow of your application
- Give a brief introduction to your project and the list of features. Summarize in a few sentences what you proposed in the ideation report.
-
Give some sample user interface layouts for your application. You can use either wireframe diagrams or prototyping tools to construct the mock representations of your UI design
-
Briefly explain the rationale behind designing your UI and how it is geared towards supporting the list of features for your application.
-
Give a brief overview of the navigation structure for your application.
-
Briefly indicate a typical flow of your application in terms of user experience. You can use any way of representing the flow. You can also construct a prototype using one of the prototyping tools to illustrate this.
- Provide any references relevant to the report.
In this module, we will be learning about Bootstrap's JavaScript components.
These components have two parts, the CSS classes, and the JavaScript support. In this module we will learn about using the JS components without writing any JavaScript Code.
This is possible using the data-* attributes that Bootstrap provides for us to control the components.
At the end of this module, you will be able to:
-
Understand the various Bootstrap components that require JavaScript support in order to function
-
Use the data-</i> attributes that Bootstrap's JS API provides for you to control the JS components without writing a single line of JS code
In the previous module, we examined the number of Bootstrap components that are purely based around CSS.
By applying the CSS classes for these components, we were able to create them on our webpage.
In this module, we are going to examine more of Bootstrap's JavaScript-based components.
Summarizing, as we saw in the previous module, Bootstrap supports a number of CSS classes that can be applied to your HTML markup in your webpages to activate and make use of these CSS classes.
You could see how the CSS classes modified the generic HTML tags and provided Bootstrap's own way of presenting the same information.
The components that are purely based upon CSS can easily be activated by applying the bootstrap CSS classes to the various HTML tags that are there in your webpages.
Bootstrap by itself can be used purely for its CSS classes.
One other aspect of Bootstraps CSS classes that we saw was that most of these components started with a base class that you applied.
Like for example, when you look at button, you saw that the base class was the BTN class.
Then you would apply something like a BTN primary which would add their colors to the BTN, then you could define the size of the button by saying BTN SM.
Then you could also define the button to be an entire block by using the BTN block class.
All these subsequent classes and modifiers to the base BTN class.
This approach, you will see it over and over again in many of the Bootstraps components.
You will have a base class then set of modifier classes that can be applied to modify the behavior of the base component.
This facilitates easy design of your webpage.
Taking another example, we can look at the Nav class.
We use the Nav class in the Nav-bar that we included in our webpage in the previous module.
The Nav class, we modify that by applying the Nav-bar Nav class to it.
That provided us with a certain way of presenting the navigation information.
In this module, we will examine Nav-tabs and Nav-pills which are yet another way of presenting navigation information for the webpage.
The tabs and the pills we are presenting navigation again, supported with a JavaScript plugin, provides an enhanced way of providing navigation within your content.
We'll examine that in this particular module.
I use this as an example to illustrate to you how started from a base class, you can modify by applying the modifier classes to the base class.
Of course, if you want to bring in the JavaScript part of your Bootstrap components into action, then you should start applying the JavaScript classes.
Bootstrap supports a number of components that are supported through JavaScript plugins.
Now, when you use these plugins in your webpage, you can include individual plugins that you are actually going to use in your website, or the entire set of plugins.
Now, what we're going to do in the exercises is, include the entire set of plugins because we just want explore all of them.
But if you are designing a website, you may include only a subset of these plugins that you're actually employing in your website, thereby reducing the amount of JavaScript code that needs be sent over to a user that is viewing your webpage.
This is the way I look at Bootstraps approach to using JavaScript in its own support for Bootstrap components that are enabled with JavaScript.
If you look at JavaScript on its own, it provides a lot of flexibility and enables you to do lot of interesting things.
But that also entails writing JavaScript code to be used when you are designing your website.
Now, I look at JavaScript as a big sumo wrestler with a lot of capability, a lot of power, but untamed.
Now, JQuery as a library that is built on top of JavaScript, essentially takes the sumo wrestler and then packages it in a better manner to make this hundred lbs gorilla into a more manageable size, more easier to approach and more easier to include and make use off in your website design.
If you are using JQuery library directly, you can definitely leverage many of the JQuery components and make use of them in your webpage.
Now, that is an approach that you can always take because JQuery is already going to be included in your Bootstrap webpage, if you are going to leverage the JavaScript-based components.
Bootstrap takes this one step further, and then looking at the picture Bootstrap's approach is to take the sumo wrestler and then put him into a box.
Essentially standing for packaging your JavaScript plugins into a component that you can more easily use in your webpages.
The Bootstrap JavaScript-based components essentially take JQuery-based support, but then package them in a way that you can employ them in your webpage even without writing a single line of JavaScript code.
This is where the Bootstrap JavaScript component can be used without writing a single line of code.
The way it is supported in Bootstrap is that, the JavaScript components support a number of data hyphen star attributes that you can apply to your HTML tags.
You will see me using things like data-toggle, data-spy, data-target, and so on.
If you recall, when we designed the Nav-bar, you had actually seen a couple of these attributes.
There we designed the button for the extra small screens.
Now, it is time for us to [inaudible] why we did it in the previous module.
We will explore this approach in great detail in this module, looking at several Bootstrap components that leverage JavaScript support.
Of course, you can leverage the full JavaScript API that is available for all these components by actually writing JavaScript code.
We will defer this to the next module, where we will examine how you can write simple JavaScript code based upon the JQuery syntax to add more functionality to your JavaScript-based Bootstrap components.
Bootstrap Resources
In this lesson, we examine tabs and tabbed navigation. Tabs require Javascript support to be enabled for navigating the content. At the end of this lesson you will be able to:
-
Design a tabbed navigation for your content
-
Use tab panes to organize the content and navigate the content using tabbed navigation
In the previous lesson I referred to the nav class that is used in Bootstrap for creating navigation structures.
We explored the navbar nav already in the previous module.
In this lecture, we're going to explore nav tabs and nav pills in a bit more detail.
And the exercise that follows this, we'll look at how we make use of this to create a navigation structure for our web page.
Tabs and pills provide an interesting navigation structure for our web page.
They will allow you to enclose content inside your web page that the user can navigate among the content without reloading the web page to a different web page.
If you have a certain amount of content to be presented in your web page, but want to show only part of the content on your web page, but still provide user with an ability to navigate to other parts of the content, then tabs and pills can be very useful for this purpose.
What's better than to just go and take a look at the use of tabs and pills in navigation?
Taking a look at an example of the use of tabs in navigation, you'll see that in this particular case, you have the Corporate Leadership information in our aboutus.html page, enclosed inside tabs with the tab navigation built on top.
You can see that you have the four different corporate leaders represented in their own tab here.
And the content currently revealed on the web page is only the details about the first corporate leader.
If you want to switch to others, then you simply click on the corresponding tab, and then reveal that content in your web page.
Notice that we are not navigating to a different web page, but we are simply revealing the content using this tab navigation here.
Instead, in some cases you may find a pill-based navigation more useful for your purpose.
A pill-based navigation works like this.
You still have the same navigation structure on top here, but the currently displayed information will be highlighted as a pill here.
If you switch to another part of your navigation, notice how that particular item is being highlighted in the web page, and the corresponding information being displayed in the tab content down below.
This is a pill-based navigation.
This uses nav pills instead of nav tabs for the class being applied to the nav class there.
Now that you have seen an example of the use of tabbed and pull navigation in a web page, I'm sure you're curious to know how it is actually constructed.
That is what we're going to explore in the exercise next.
We will use tabbed navigation and then use tab content and tab panes to organize the actual content that will be displayed in our web page.
In this exercise, we're going to explore Bootstrap's tab-based navigation, Bootstrap's support for tabs, and how tabs can be used to organize content on your web page.
And how you can navigate from one tab to another tab, and then reveal content in each of those tabs in web page.
Now, you will see me using the nav class, and then further qualify it using the nav tabs class.
The same approach can be also used with the nav pills that we looked at in the previous lecture.
To get started with this exercise, we will go into aboutus.html page.
And then right there, where we have the corporate leadership content there, after the h2, I'm going to introduce the tabbed navigation.
This is where I'm going to make use of the ul with the class nav nav-tabs.
You have seen that earlier when we constructed the nav bar, we also used the ul inside the nav bar to specify the navigation items there.
Similar approach here, except that here we're going to use the ul with the nav and the nav tabs here.
Inside this ul, we will construct the navigation structure for this tabbed navigation here.
In there, I will use the list item with the class nav-item, and construct the navigation around this list item.
This introduces the first item into my nav tabs.
Right after that, inside there I will introduce an a with the class nav-link active.
This one, as you see, if you recall from the way we use the ul with the nav item and nav link.
In the nav bar, we are seeing a similar approach here.
So, nav-item active, and then href.
This would be a reference to tab pane later on, which would have the ID of peter there, and role is tab for this one, and data-toggle tab.
You can see the Bootstrap's Javascript component coming into picture here.
And then I will say Peter Pan, and then close off the a tag there.
This would complete our first tab in our tabbed navigation.
Let me complete the rest of the code, and then we'll come back and review the rest of the code there.
Here you can see that I have completed this navigation structure here.
Similarly, I am defining the list items for the remaining free corporate leaders here.
Now this, let me save the change. And then let's go and take a quick look at the web page.
Switching to the web page, you now see how using the nav nav tabs we have created this navigation structure right below the corporate leadership here.
This navigation structure meaning that I should be able to navigate and view each one of them in more detail by clicking on this.
That is how the tabbed navigation works here. Now, obviously, the content of each one of them should appropriately show only that person's details here.
This is where the use of tabbed content and the tab pane classes will come into effect.
And we're going to enclose this content using that.
And then tie this to those navigation, tab navigation up here, so that only one single corporate leader's information is displayed on the screen at a time.
Once we complete setting up that tabbed navigation, then we'll move down into the actual content here.
And then now, I'm going to reorganize this content into four separate tab panes, each of which will be shown when the corresponding tab pane is selected in the tabbed navigation.
To get started, the first thing that we're going to do is to go in and separate each of these four corporate leaders into the four parts there, so that it's easy for me to see what I am doing.
At the h3, I'm cutting them into four different parts, and then we'll be able to work with these.
Now I have one, two, three, four.
This content now needs to be enclosed inside a div with the class tab-content.
All this content that we have for the four different corporate leaders should be enclosed inside a tab-content div there.
Now I have enclosed that inside the tab contact.
Now, for each one of them, I need to create another div with the classes tab pane and some additional classes.
And then organize this contact.
Let's start with the first one.
For the first corporate leader, I'm going introduce a new div with role as tabpanel.
This serves as the tab panel that will be displayed when the first tab navigation is selected. And the corresponding class that I need to apply is tab-pane.
This is the tab pane, the actual content that is contained in there.
And then another class that I apply is fade.
The fade class allows this content to fade in.
This is an animation class that Bootstrap supports.
Also, I apply this class called show.
The show class essentially specifies that this particular content should be shown when the page is first rendered.
It will apply the show class only to the first tab pane, the remaining tab panes will not have the show class applied.
And the last class that I'm going to apply is active because this is the tab pane that is going to be displayed in the page when the page is first rendered.
In addition, for the navigation to work, I need to give this a and ID, and since I used hashtag Peter for the tab navigation content, so I'm going to apply the ID as Peter here.
When this is referred to in a link there with hashtag Peter, this is the corresponding pane that I am referring to.
Now, what I'm going to do is I'm going to copy this div from there.
And then I'm going to apply this div to the second corporate leader's information, except that for this one I should only apply the tab pane and fit.
The show and active should not be applied for the remaining three.
And the ID here should be Danny for the second one.
I'm going to simply copy this code, and then paste that for the third corporate leader here.
And then so the tab panel and the third one is Agumbe.
And the the last one, again, I paste that in, and then the ID should be changed to Alberto, and close off this div here.
This div for the last one should be closed off at that point. And that should take care of the four tab panels that I need.
Going in and indenting this content, so that I am satisfied, my obsession is satisfied there.
Okay, that completes the organization of the tab content.
Now, let's save the change and go and take a quick look at what the web page look likes now.
Going to our web page, you now see that our web page is only displaying the content corresponding to their CEO.
If you switch to any one of the other ones, you will see that the corresponding information is displayed.
And notice how this information fades in when you select that particular user.
But, of course, if you are happy with this, then that's fine, we can stop at this point.
But I would like to nicely define a real tab around this.
This is where I'm going to apply a few CSS attributes, properties to this particular tab here, so that it's nice, clean tab structure being defined there.
Let's create a few CSS properties for this.
The last step, switching to styles.css.
After the navbar inverse, I'm going to introduce the CSS classes for the tab content, so I specify for the tab-content, border-left: 1px solid DDD.
And I'm going to apply the same for border-right and bottom.
I don't need to apply to the top because the top is governed by the tab navigation already.
And then let me give a padding of 10 pixel all around, and then save the changes.
Let's go and take a look at our web page after this.
Switching back to our page, now you see a nice, clean tab-like structure being created.
When you navigate to each one of them, that corresponding information is appropriately displayed in its own tab.
This completes this exercise where we looked at the use of tabbed navigation for our web page.
And then we saw how we can create tab navigation and enclose other content.
This is also a good time for you to do a Git Comment with the message tabs.
In this exercise we will explore Bootstrap tabs and tabbed navigation. In particular we will learn about the use of tabs for organizing the content. At the end of this exercise you will be able to:
-
Design a web page to use tabbed navigation for organizing the content
-
Use tab panes and organize the content into the panes
-
Facilitate navigation among the tab panes using the tabbed navigation elements
-
Open the aboutus.html page and move to the second content row containing the details of the corporate leadership of the restaurant.
-
Right after the Corporate Leadership heading, introduce the following code to set up the tabbed navigation:
Tab Navigation Elements:
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#peter"
role="tab" data-toggle="tab">Peter Pan, CEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#danny" role="tab"
data-toggle="tab">Danny Witherspoon, CFO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#agumbe"role="tab"
data-toggle="tab">Agumbe Tang, CTO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#alberto" role="tab"
data-toggle="tab">Alberto Somayya, Exec. Chef</a>
</li>
</ul>
Note the use of the <ul> tag with the nav and nav-tabs classes to set up the tab navigation. Each list item within the list acts as the tab element. Within each list item, note that we set up the <a> tags with the href pointing to the id of the tab pane of content to be introduced later. Also note that the <a> tag contains the data-toggle=tab attribute. The first list element's <a> tag contains the class active. This tab will be the open tab when we view the web page. We can switch to the other tabs using the tabbed navigation that we just set up.
- The details about the various corporate leaders should now be organized into various tab panes. To begin this, we will enclose the entire content into a div element with the class tab-content as specified below:
<div class="tab-content">
...
</div>
- Then we take the name and description of the CEO of the company and enclose it within a tab-pane as follows
<div role="tabpanel" class="tab-pane fade show active" id="peter">
<h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
<p> ... </p>
</div>
Note the use of the tab-pane, fade, show, and active classes and with peter as the id. This is the same id used as the href in the <a> link in the navigation.
- The remaining content is also similarly enclosed inside appropriate divs with the correct ids and the classes specified as above. Only the first tab pane will have the show and active classes specified to indicate that the content should be visible on the web page by default.
- We now modify the CSS styles for the tab-content class in the mystyles.css file as follows:
Modify tab-content in mystyles.css!
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
This modification adds a 1px border to the tab content which joins with the upper border introduced by the tab navigation element to give a clean tab like appearance.
- Finally do a Git commit with the message "Tabs".
In this exercise we learnt the use of tabbed navigation, tab content and tab panes and their use in organizing and navigating within the content in a page.
In this lesson we learn about the collapse javascript plugin that allows us to hide and reveal content. In particular we explore its use in creating an accordion. At the end of this lesson, you will be able to:
-
Use the collapse plugin to hide/reveal content
-
Construct the accordion using cards
Let's now talk about a very useful plugin in Bootstrap called as the Collapse.
We have seen its application in the navigation bar earlier.
We'll revisit that code and take a quick look at it in more detail.
A related component is called as the Accordion.
The Accordion makes use of the Collapse plugin for its functioning.
And we will see that in detail in the exercise that follows.
The Collapse plugin provides an easy way of revealing and hiding content on your web page.
This revealing and hiding of the content is usually triggered by the user clicking on a button or a link in your web page.
Now you will see many places where the Collapse kind of behavior is very well leveraged to show content.
We'll revisit our navbar to look at the Collapse plugin in action, and then we'll also see an Accordion example next.
Going back to our web page, you'll recall that when we created the navbar in our web page for extra-small screens, the navbar was collapsed and then it was revealed when we clicked on the button here.
Now this is an example of the use of the Collapse plugin here.
When we look at the code, we will see that we actually apply the Collapse plugin to the div that contains this navigation bar.
Taking a look at the code for our navigation bar that we designed earlier, you saw that in here, inside the container, we created this button which is displayed for the extra-small screen sizes by using the navbar-toggler class.
Look at the div that follows this button here.
For the div that follows this button, we used the collapse class.
This is the use of the Collapse plugin in our navbar.
What this creates is that this particular content, our navbar that is enclosed inside this div, will be collapsed for the extra-small screen sizes.
And then together with the Collapse plugin, this button that appears there will trigger the showing and hiding of this navbar here.
That is why when you look at the button, you will see that right there, we supply the data-toggle attribute with the collapse in here, and then the data-target as #Navbar here.
And notice that the id for this div that we applied here is Navbar.
We are specifying essentially that this button is going to act as the triggering mechanism for this Collapse plugin to work on this div here.
This is a use of the Collapse plugin in your web page.
Also, we'll look at the other component, which is the Accordion in Bootstrap.
How does an Accordion behave?
This is an example of an Accordion that we're going to construct in the exercise that follows.
Here, you'll see that I have replaced the tabbed navigation that we did in the previous exercise by using an Accordion here.
The way the Accordion works is that one piece of content is revealed and the remaining three are hidden.
This uses the Collapse plugin for this purpose.
When you click on any one of these other corporate leader's name, then the details of that corporate leader gets revealed and the remaining three gets hidden.
This is the Accordion behavior here.
If you are familiar with an accordion, the musical instrument, you know how the bellows of the accordion work.
This is, in some sense, behaving like the bellows of the accordion.
That's the reason why this component is referred to as an Accordion in Bootstrap.
One more example of the Collapse plugin in use is on your own course website.
If you go to your course website, and then you go into the content of your course website and start viewing the content here, you will notice that on the left side, you have a navigation that comes into picture on the left side.
This is the navigation there.
When you click on each one of them, you notice how the content in here is hidden and revealed by clicking on each of these links there.
This is like the Collapse plugin that we saw in Bootstrap.
Although, of course, the Coursera page actually doesn't use Bootstrap.
We'll move to the next exercise where we will see how we construct the Accordion for showing our corporate leadership information.
Accordions are one of those annoying instruments that some of you may have seen already.
It has one of those bellows with a keypad down below here and then you blow and then play the music with the keys there.
And not everybody enjoys it. I'm pretty sure.
But no offense to accordion players.
Accordions in bootstrap are very interesting for sure.
We'll look at how we apply accordions to be able to reveal and hide content in our web page in this exercise.
Going back to About Us at HTML page where we had the corporate leadership information.
Now, I'm going to replace the top navigation with an accordion based navigation. I'm going to remove this UL that defines the term navigation completely.
And then we're going to design the accordion around the content that we already have.
Let's delete this UL that contains the tab navigation so they will be left with just this part which is enclosed inside the top panel and the top content.
We're going to go and modify this. Going to this div here, I'm going to remove this class from there and then I apply the id as accordion.
We need this id later on to be able to create the accordion that div, that contains this content is still in place there.
The top content is now changed to accordion.
Now, each of this content in here, we're going to convert that into a card based structure there so that they can reveal the content in each of those cards so you will see me using the card and the card body classes there to enclose this content.
Now, going into the actual content here, I'm going to start applying the card class here with the div there.
We'll say, "div class card" and then close the div there and then this content goes into the div there.
Now, in here, we are going to go in and create a div with the class "card header." I'm going to show you for one of them and then we are going to repeat this process for the remaining three also.
We'll say, "card header roll tab" and then "id peterhead." I'm going to take this h3 from down below here, cut it out and then paste it into the card panel.
This h3 that defines the name of the corporate leadership person is cut from inside the tab panel and then moved in to the card header here. This is going to act as my navigation aid.
Now, to this h3, I'm going to apply a class called mb-0.
This is mb-0 here.
Now, this name itself, I'm going to enclose this inside and an a, so I will go to the next line and then say, "a data toggle" and the data toggle will say, "collapse."
Now, you see that you're using the collapse plugin.
We have this closing h3 there.
I'm going to shift it to the next line here and then I'm going to close the a tag right there.
With this the a tag now encloses the name of the CEO in here.
And then the h3 tag of course closes the h3 on top and then this is inside the div which is the class card header.
This forms the header structure for my accordion div.
Going now to the tab panel below, I'm going to change this class from tab panel fade to collapse.
So this would be a collapse plugin which will be useful for our accordion and also I will remove this active class for this and the id will be left as peter for this.
And then you'll say, "data parent" and you would specify accordion.
You see why we gave the id of accordion to the div that encloses all these content.
This is the way to specify that this is going to form part of the accordion that you are constructing there.
That's why data parent accordion.
Now, the content inside this tab panel, I'm going to enclose it inside the div with the class card body and close off that div here, and then indent this content in there.
Let's save the changes and then go and take a look at our web page on this moment.
Going to our web page you now notice that in the corporate leadership, the CEO's name is highlighted here in the card header here.
And then the content is down below here. Now, we will create the remaining three down below and then enclose all of them in there.
I'm going to repeat the same structure for the remaining ones.
I will have the card with the card header, and the card header will enclose the name of the person like this.
You pretty much will follow the same structure for the remaining three pieces of content.
Let's make the changes and then we'll come back and review the code.
Coming back to the code, you now see that for the remaining three, you notice that I am still using the card here with the card header here and h3 with the mb-0.
This is inside the card header class div there and then down below the class only as collapse and then with the id and then the card body enclosing the P there.
Same thing with the remaining two also.
With this change, these three remaining corporate leaders information will be collapsed but Peter Pan's scarpered information will be revealed when the first render the web page.
With this change, now, this code snippet is obviously available in the instructions that follow here so no need to worry too much.
You can always refer to that to ensure that you have done it correctly.
Let's save the changes.
Switching back to our web page, you now see the accordion constructed here.
You see that the first corporate leaders information is displayed here.
The remaining three are collapsed in this moment.
That's the reason for the use of the collapse plugin and also the reason for shifting the name of the corporate leader into the card title.
See you saw that it'll be displayed like this in there.
Now, clicking on any one of them you now notice that when you click on that that content will be revealed but the remaining three are hidden.
This is the accordion behavior here.
With this, we complete this exercise.
This is a good time for you to do a git commit with the message accordion..
In this exercise we explore the use of the collapse Javascript plugin together with card component to create an accordion to show/hide content in a web page. At the end of this exercise, you will be able to:
- Design an accordion using the collapse plugin together with the card component.
-
First delete the <ul> class that was introduced for the tabbed navigation.
-
Then the turn the tab-content div into a accordion div. Use the code structure as shown below:
<div id="accordion">
. . .
</div>
- Then, convert the first tab-pane into a card such that the name appears as a card heading, and the <p> will be in the card body. Use the structure of the code as shown below:
Convert first tab-pane into card!
<div class="card">
<div class="card-header" role="tab" id="peterhead">
<h3 class="mb-0">
<a data-toggle="collapse" data-target="#peter">
Peter Pan <small>Chief Epicurious Officer</small>
</a>
</h3>
</div>
<div class="collapse show" id="peter" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">. . .</p>
</div>
</div>
</div>
- For the remaining three leaders, use the same structure as above, with the appropriate ids set up for the cards, as shown in the code structure below:
Show leaders:
<div class="card">
<div class="card-header" role="tab" id="dannyhead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#brian">
Brian Bauska <small>Chief Information Officer</small>
</a>
</h3>
</div>
<div class="collapse" id="brian" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">. . .</em></p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="agumbehead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#lance">
Silus Lance <small>Chief Software Engineer</small>
</a>
</h3>
</div>
<div class="collapse" id="lance" data-parent="#accordion">
<d iv class="card-body">
<p class="d-none d-sm-block">. . .</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="albertohead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#alberto">
Alberto Somayya <small>Executive Chef</small>
</a>
</h3>
</div>
<div class="collapse" id="alberto" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">. . .</em></p>
</div>
-
After completing the update, check the behavior of the accordion on the web page.
-
Finally do a Git commit with the message "Accordion".
In this exercise we constructed the accordion using the collapse plugin together with the card component.
Bootstrap Resources
In this lesson we look at several ways of presenting information to users by overlaying the information on top of the page. In particular, we look at tooltips, popovers and modals. At the end of this lesson, you will be able to:
-
Set up a tooltip to be displayed when the user hovers over an area of the page
-
Enable popovers when the user clicks on a link or button
-
Reveal and hide modals when the user clicks on a link or button
Let us now try to understand several mechanisms to enable us to display information to the users overlaying the content of your web page.
Here we'll look at three different constructs that are available in Bootstrap called tooltips, popovers, and modals.
What are tooltips, popovers and modals and how are they useful?
We'll look at some basic ideas first, and then we'll go on to look at some examples.
In the exercise that follows, we'll use tooltips and modals in our web page, and we'll look at an example of popovers.
As I mentioned, tooltips, popovers, and modals are a way of revealing content to the users, when the user interacts with certain elements on your web page.
Say for example when the user's mouse clicks on a button, or hovers over a button, or clicks on a link, or reaches a certain point on your web page.
All these will trigger information to be displayed to the users.
In this case, the information is displayed as an overlay on top of your web page.
The underlying content of the web page is still there, but this is laid out on top of the underlying content.
In terms of flexibility, tooltips are the simplest to implement, but at the same time have limited flexibility in how they can display information.
Popovers are more flexible than tooltips, but they also have their own limitations.
Modals give you the most extensive support for displaying content in a wide variety of ways.
As an example, let's go to our webpage that we have been working on.
You see that when we hover our mouse pointer onto this button.
You see this message popping up on the screen here, with some additional information.
This is an example of a tooltip.
This allows you to display smaller amounts of information to the users.
For example if you are trying to guide users through your website and want them to know what happens when you click various locations any web page, these maybe a good way of reminding them of what is expected.
You could easily design for example, walkthroughs of your website using these tooltips to indicate to users.
If you want a bit more detailed information, then popovers would be more useful.
The same example, implement and using a popover would look like this.
Now in this case, you will have to explicitly click on the button to show the popover.
In that case, the popover is shown with some title information, and then the actual content at the bottom in that popover.
Now, dismissing the popover will require you again to click on the bottom there.
This is the behavior of a popover. In some circumstances, popovers are more useful than tooltips.
Our third kind of data overlay is the modal.
A modal allows you to present more detailed information to the users than a tooltip and popover.
The content of the modal is itself divided into a header, body, and the footer.
And the modal itself can contain a lot more detailed information.
And you can use the entire Bootstrap grid, inside the modal body, to organize the actual content.
We look at a couple of examples of the use of modals next.
Going to our web page, you will see that on the right hand side, here we have a link here called Login.
When you click on that link, you will notice that this modal with their login form is popped up on the screen. S
This is the typical behavior of a modal.
Here you can type in the information, and then click on the Sign In button to sign in to your website.
Going to your Coursera page, here is a real life example of the use of a modal.
For example, if you click on the Log In button here, you can see that o Coursera, a form pops up on the screen.
This is another use of a modal in your web page.
Now that you have seen examples of tooltips, popovers, and modals, let's go to the next exercise, where we'll create a tooltip on our index.html page.
We'll also create a modal that allows the user to type in information for logging in into our web page.
In the lecture before, we saw several ways of revealing content to the users.
This would be an overlay on top of your web page to show the information to the users.
We'll look at two of those approaches, Tooltips and Modals in this exercise.
First, we will add a Tooltip to this page.
Going to index.html and in the Jumbotron, we see this button in the Jumbotron there.
To this button, I'm going to add in a tooltip.
Going into this button, what I will do now is simply go into the next line so that it's a bit more clear to write the code there and into this button, I'm going to introduce the tooltip here.
After the button warning, I would say, data-toggle-tooltip, so you can see that the Javascript component coming into use here and then data-html-true.
If we apply this data HTML attribute and sent it to true, that means that the tooltip content can be styled using HTML and then they will say the next line, I will give the attribute of title.
This is where the contents of the tooltip will be enclosed.
We will say "or call us at".
You can see that I am using HTML to format the contents of the tooltip there.
With that, the tooltip is introduced into the button there and also the last attribute I will give is data-placement which I will give as bottom here.
Meaning that this tooltip will be shown to the bottom of this button here.
After adding in this into the button, we'll now go and add some JavaScript code to the bottom of this page in order to activate this tooltip.
Going to the bottom of the page, let me introduce the script there by adding in the tags for the script.
Inside of this, we will define the actual JavaScript code here.
We will say dollar documents.
This script is in using jQuery syntax here.
This specifies when the document is ready, when this particular HTML document is ready for rendering and define invoke this particular function here.
We supply the JavaScript function to be invoked at that point so we'll specify our function and then we'll say in brackets data-toggle-tooltip and tooltip.
That is the code that we are going to introduce into this page here.
This is in jQuery syntax and we will cover jQuery a little bit more in the next module.
For the moment, this is specifying that wherever there is an attribute of this kind for that particular HTML tag, turn on the tooltip.
But this change will save the changes and then go and have a look at how the tooltip looks like on the web page.
Going to the web page, now when we hold our mouse pointer onto the pattern here, you can see that the tooltip is being displayed at the bottom here.
You can notice that the content of this tooltip is exactly what we gave as the title attribute for that bottom there.
This is how we can add tooltips to our page.
Tooltips are a nice way of providing some additional information for the user when the user navigates to different locations on the page.
Continuing with the exercise, in the next step, we are going to create a modal in our web page.
This modal will host the login form and will be shown by using a link in their navbar.
To get started, bootstrap advises that all modal related code be placed at the top of your page.
I'm going to go in and write below the navbar here, I'm going to place in the code for the modal there.
To create a modal, I will start off by saying div ID login modal.
We give an ID to this modal so that it can be triggered from the navbar link and then class as "modal fade".
So you see that the class is modal and fade means that when the modal is brought onto the screen, it'll fade onto the screen and the role is as a dialog.
Which means that it is displayed on top of the page.
Let's close off the div of the part. So inside here, we are going to create the modal.
In there, I'm going to create the second div with the class as modal-dialog and then inside here we will define the content of the actual modal here and close off the div.
And so, this is to be the modal content will be structured here.
Inside this modal dialog we will create another div with the class modal content and close off the div and a typical modal will contain a modal-header.
That's where the next div is going to host.
And then a modal body which will contain much of the modal related content.
All these sections of the modal are optional, but at least you should have one such section in your modal otherwise it does not make any sense to create the modal there.
With this, the structure of the modal is now ready.
We are going to go in and fill in the content into this modal.
Now, we need to define what goes into the modal. Now, in the header we are going to put in a button, a cross-button in the modal which when clicked will dismiss the modal.
That's the usual way modals are designed.
And the modal body will itself contain the form.
Now, a modal can contain anything that you want, so for example, if you click on an image in an image gallery and you want to show the larger size of the image, even there you can use a modal to display the information.
Now in this exercise, we are going to use the modal to host a form that is shown for the user.
Okay, now, in the modal header, we are going to introduce a button with the type button and class close.
You see that this is a button that is used to close the modal and then you will say, data-dismiss and then modal.
What this means is that this particular button when clicked will dismiss the modal from the screen.
And this button, I'm going to use the times, will display as a cross in the modals here.
So I would say times here.
Before this button, we are going to introduce a header which we will display in the modal's header so I will start out with an h4 with the class modal title.
And then inside this h4, I will include the title of the modal, which is login because this is going to show the login form.
Now that we have put in some details into this modal, let's add in the link into our navbar which will trigger this modal and then we will have a quick look at how the modal looks like on the screen.
Going to the navbar, right after the UL here, I'm going to include in a link which can be used to trigger the showing and hiding of the modal.
To do that, I will go in and use a span with the class navbar-text.
This is what allows me to include a link into the navbar and show it as text.
Inside the span, I will use an A with the data-toggle, so you can see the JavaScript data-toggle coming in and the data-toggle is for a modal and then data-target.
You recall that we had given the ID as login modal to our- Modal that we included.
I'm going to use that as my data target with the hash in front of that.
And inside here, I will go in and use a font awesome icon for a login.
This is a font awesome ''fa- sign-in'' icon and say login and close the e-tech.
With that, let's save the changes and take a look at the web page.
Going to our web page in the browser, you now see that on the right edge, you see this login with this icon created there.
This is the link that is going to trigger the showing of the modal.
If I click on this link, then the modal will show on the screen.
Notice that when we created this modal we said, header which contained the login and then also this button and then the body, currently empty, we're going to introduce more code in there.
Now if you click on this button the modal will disappear.
Click on that again, the modal is shown.
Even if you click outside the modal, the modal will disappear.
So this is the behavior of the modal that we have come to expect.
Now, in the next step I'm going to go in and introduce the form here.
I'm not going to explain the details of the form because you have already studied forms in one of the earlier lessons.
I'm just going to simply go in and paste the form code and then we'll have a look at the form in the modal here.
Coming back to the code, you can now see that in the modal body, I have filled in a form.
And then I have two form groups here with an input with the type email and input type password and then I have a checkbox here that I have.
This should be easy for you to decipher what this form is code structure EEs, from your understanding of how Bootstrap forms are designed.
I have put in two buttons.
One is a submit button and another one is a cancel button.
The cancel button has the first one. The cancel button here has data dismiss model.
Which means that when you click on the cancel button the model will be dismissed.
And the other one is a submit button which is used to submit the form.
With these changes, let's save the changes and then go and have a look at our Web page.
Going back to the web page, now you click on the login then you'll see a form for a user to sign in.
You'll see that you have two boxes here.
Input boxes here for entering email and password, and then a checkbox for say Remember me.
And then you have a sign in and a cancel.
If you click on the cancel the modal will go away.
Just like when you click on the cross there.
And then if you fill in this information and keep click on sign in, the sign in process should be initiated.
At this moment we don't have a server for this to work, but I'm just showing you in Bootstrap how you would create a form like this.
I'm sure you have seen things like these on many websites where when you click on a login button something like this with the form pops up on the screen and expects you to type in the information.
Now you'll see how you can leverage models to display information overlaying your web page.
With this we complete this exercise.
In this exercise, we have seen the use of tooltips and we have seen the use of models to display content.
This is a good time for you to do a git-commint with the message tool tips and models.
In this exercise we will examine how to add tooltips to a web page. In addition we look at adding modals to a web page. At the end of this exercise, you will be able to:
-
Add tooltips to a web page
-
Add modals that are revealed when the user clicks on a link or a button in the web page.
- Let us now switch to the index.html page. We will now add a tooltip to this page. The tooltip will be added to the "Reserve Table" button that is in the jumbotron. We will update the <a> tag for the button as follows:
Add tooltip!
<a role="button" class="btn btn-block nav-link btn-warning"
data-toggle="tooltip" data-html="true" title="Or Call us at <br><strong>+852 12345678</strong>"
data-placement="bottom" href="[#reserveform]{.underline}">Reserve Table</a>
As you can see from the code, we add a data-toggle, data-placement and a title attribute to the <a> tag in order to introduce a tooltip.
- The tooltip needs to be activated by adding a small Javascript code to the bottom of the page as follows:
Activate tooltip!
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
This script is added right after the line that imports the bootstrap.min.js file.
- In the next step we introduce the modal to the web page. To set up the modal, add the following code right after the navbar at the top of the page.
Introduce modal to web page!
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
- Next we introduce another link on the right side of the navbar in order to trigger the display of the modal. To do this, add the following code in the navbar after the </ul>:
Introduce another link!
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal">
<span class="fa fa-sign-in"></span> Login</a>
</span>
We are introducing another link to the right of the navbar using the navbar-text. This contains a link with an <a> tag with the data-toggle="modal" and data-target="#loginModal" attributes.
- Save all the changes and do a Git commit with the message "Tooltip and Modal".
In this exercise we explored tooltips and modals as two ways of revealing content for the user upon clicking on a button or a link.
In this lesson we will examine the use of the Carousel component in our web page. We will examine the configuration of the various aspects of the carousel. At the end of this lesson you will be able to:
-
Use a carousel component in your web page
-
Configure various aspects of the carousel
-
Add controls to the carousel to manually control it
Let's take a look at yet another interesting component in bootstrap, called as the bootstrap carousel.
The carousel allows you to display multiple items on your web page and provides an animated display of these items.
As I mentioned, a carousel is an interesting component that allows you to include a slideshow on your web page, and can also provide manual controls for the slides.
As the slides slide from left to right on your web page, you can control and choose which particular item to view, and also you can manually scroll the items left and right.
Carousel finds a lot of applications in many websites that you might have visited.
Let's take a look at an example of a carousel.
Go into your web page, you see a carousel included on this web page.
You see that this carousel provides interesting transitions from one slide to another, and also provides manual controls that enable you to select which item to view.
For example, you can manually scroll right and left in the carousel.
You can also select an item from the carousel using these indicators that are provided at the bottom of the carousel.
I'm sure you have seen many websites using this kind of component.
Now that I have gotten you interested in the carousel, I'm sure you're curious about how you create one for your web page.
That is what we're going to examine in this next exercise, where we will add a carousel to our web page, the index.html page and then create the manual controls for it.
We just learnt about the carousel component in the previous lecture.
In this exercise, we're going to add in a carousel to our index.html page and in the process learn how the carousel component works.
Going to index.html page, we'll add in a new row into the content div, as the first row in the div.
I'll go in and say, give div class row row-content and inside this div, we're going to create the carousel component.
And in what's div I will add in the inner column div, which will contain the carousel component here.
To add in the carousel, here I will add in the div with the ID my carousel and a class carousel and slide and the data ride class.
You can see the JavaScript component coming into action here, and then close off the div and start building out the carousel inside this div here.
Into this carousel, we'll add in the content of the carousel next.
I'll go in and then add another div with the class carousel-inner and the role as list box.
This is the way we build up the carousel and then close that div there.
And inside this div again we'll introduce divs that will host the items of the carousel by applying the carousel item class.
And the first one in the carousel item...
The first one in the carousel class, I will apply the active class.
This is the first div which starts out containing the starting slide there and the remaining ones, I'm going to add in.
Let me add in two more carousel-item divs here and apply only the first one with the active class.
Now I'm going to introduce in the content into this carousel items.
To construct a carousel item, I will go in there and then include an image with the class d-block.
This is used for, this is a flex class that allows our image to be properly positioned and then add in the image fluid class and then the source as img.
What I will do is to move in that content from the three content rows below and then add it into the carousel here.
I add in an image here and then to the carousel, I can also add in a div with the class carousel caption. In here we can include some text that will be over relayed as a caption onto the image.
I'll say carousel caption d-none, d-md-block.
And then inside here, I will include the content from the content rows here.
I will go in and copy the content from the content rows here and then paste that into the carousel caption block here.
And I'll remove the class that we applied to the H2 from this content.
Now, we'll repeat the same thing for the remaining two by copying the content from the content rows below in here.
Let me complete that and then we'll come back and take a look at how the carousel looks like.
Here you can see that I have completed the remaining carousel items here by copying the content from the content rows below.
Let's add in a few CSS classes so that the carousel is nicely structured.
Going to styles.css file at the bottom here, I'm going to add in a couple of more classes here.
For the carousel class, I would add the background as 512DA8, which we have used before the dark colored class.
And then for the carousel-item class, I'm going to add in a height as 300 pixel.
And for the image that is included inside the carousel item, I'm going to apply a few transformations here.
I would say, position absolute.
I want to position it to the left.
This top and left zero will position this image to the top left edge of the carousel box there and with a minimum height set to 300 pixel to match the carousel-items height.
This image will essentially stretch the entire height of the carousel but will be positioned to the left edge of the carousel box here.
Let me save the changes.
We'll just go and have a look at what this carousel looks like on our web page. Going to the web page, you can now see that carousel in action on our index study table page.
You can see that the carousel is positioned at the top here and then we'll keep scrolling at regular intervals.
Note how by using the CSS classes, I have styled the background from the carousel such that the captions are clearly visible in the carousel and also how the image has been positioned on the carousel.
The height of this carousel slide is fixed at 300 pixel.
This gives a nice clean layout for this carousel.
Now, let's add in a few controls for this carousel.
Going back to index.html. Right after the carousel in our box here but still inside the carousel, I'm going to add in an OL to introduce a few manual controls for the carousel.
And with the class carousel-indicators.
These indicators will be positioned on the carousel slides to indicate which particular slide is currently being shown.
Let me introduce in the content here so I say OL, I use the OL for this.
And then, inside there I use the list with the data-target set to my carousel.
This is the ID of the carousel and data-slide-to.
And the first indicators will slide to slide number zero.
With that class as active for the first item in this list, then the remaining two items I'm going to simply use list with the data-target set equal to my carousel and the data-slide-to is set to one.
This is for the second slide there.
I'm just going to copy this one and then create the third indicator in here.
We'll go in and copy this and then change this to data-slide-to two.
We have free slides in our carousel so three indicators are sufficient enough.
Now, we'll also add in a couple of controls to this carousel which allows us to manually scroll the carousel.
To do that, I will introduce an A with the class carousel-control-prev here.
This would allow me to go to the previous slide, make the href equal to mycarousel, so you can see that we are trying to target the carousel there and the role is a button.
This is going to act as a button and data-slide as previous.
Within this A, I will introduce a icon to represent this control on the screen.
I'll say, span class carousel-control-prev-icon and close off the span here. I will now copy this control.
And paste it here and then create the control for the next slide here so I would say, carousel-control-next and roll is a button and the data slide used to next and the icon would be carousel-control-next icon.
Adding these into my carousel, let's go and take a look at our carousel at this moment.
Going to the carousel, you can now see that in my carousel I have three indicator buttons here, which indicate which particular slide is currently visible in my carousel and as the slides slide, then the indicator also correspondingly changes to indicate which particular slide is visible.
I can manually click on one of them and go to the specific slide in the carousel.
Not only that, you can see that there are now two indicators, the left and right, which I can use to again scroll through the carousel by clicking on these indicators here.
Using these controls, both the previous and the next control and indicators here, I can navigate to the specific slide in my carousel.
This completes this exercise.
This is a good time for you to do a git-commit with the message carousel.
In this exercise we will examine the carousel component and add it to the web page. We will examine the configuration of the carousel and adding controls to the carousel. At the end of this exercise you will be able to:
-
Use a carousel component in your web page
-
Configure various aspects of the carousel
-
Add controls to the carousel to manually control it
- The carousel will be added to the index.html page. In this page, go to the top of the container div that contains the content of the page and add a new content row and an inner div spanning all the 12 columns as follows:
<div class="row row-content">
<div class="col">
</div>
</div>
- Next, add the basic carousel div inside the content row that you just added as follows:
<div id="mycarousel" class="carousel slide" data-ride="carousel">
</div>
- Next add the content inside the carousel as follows:
Add content inside carousel!
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid"
src="[img/uthappizza.png]{.underline}" alt="Uthappizza">
<div class="carousel-caption d-none d-md-block">
<h2>Uthappizza <span class="badge badge-danger">HOT</span> <span class="badge badge-pill badge-default">$4.99</span></h2>
. . .
</div>
</div>
<div class="carousel-item">
. . .
</div>
<div class="carousel-item">
. . .
</div>
</div>
Note that the first item has been set up partially. Fill in the remaining parts from the content rows below.
- Add the following CSS classes to the styles.css file:
Add following CSS classes to styles.css!
.carousel {
background:#512DA8;
}
.carousel-item {
height: 300px;
}
.carousel-item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
-
Next, we will add manual controls to the carousel so that we can manually move among the slides.
-
Add the following code to the bottom after the carousel items in the div of the carousel to add slide indicators that enable us to select a specific slide:
-
Add manual controls to carousel!
Add manual controls to carousel!
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class="active"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
</ol>
-
Then, add the left and right controls to the carousel that enable us to move to the previous and next slide manually.
-
Add this to the bottom of the carousel div:
Add this to the bottom of the carousel div:
<a class="carousel-control-prev" href="[#mycarousel]{.underline}" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="[#mycarousel]{.underline}" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
- Do a Git commit with the message "Carousel".
$ git commit "Carousel"
In this exercise we learnt about the carousel component and how to add it to a web page.
We also learnt about introducing manual controls to the carousel.
Open file
We have reached the end of the third module of this course.
This is the time for your third assignment. In this assignment, we're going to look at the Bootstrap components that we examined in this module and add a few to our index.html page.
Your third assignment involves three tasks.
The first task is to take the reservation form that you created earlier in one of the content rows below, and then cut that form out from the content row.
And then create a model that contains the same reservation form for your table.
You can see that we have the number of guests here, and the date and time here, and then two buttons, the Reserve and Canc el button.
Just like you had for the reservation form.
In addition, the second task in this assignment is to add one more row here with a radio button here.
Here you will allow the user to specify which section of the restaurant they want the table in.
Whether it is non-smoking or the smoking section.
By default, the non-smoking section will be selected. If the user wants the smoking section, then the user will click the button to select the smoking section.
If the user wants the non-smoking section, then obviously the user will click on the non-smoking section to select the button.
This is a radio button group here with two buttons here, Smoking and Non-Smoking.
That is your second task in this assignment, to add the button here.
The third task is to turn this button here, the Reserve Table button here, to invoke the model.
When you click on the button it shows and hides the model.
To do this, you first need to remove the tool tip from the reserve table, otherwise that functionality won't work.
And also remove the script, the JavaScript code that you added to the end of the index.html page to trigger the tool tip.
Doing that, and then make this Reserve Table button act as the toggle for your model.
That is your third task in this assignment.
Hope you enjoyed creating this new variation of the index.html page.
In this lesson we examine the use of Bootstrap, JQuery and JavaScript together to control Bootstrap JS components. Many of the Bootstrap's JS components provide JavaScript methods and events to control the behavior. At the end of this lesson, you will be able to:
-
Understand how to use JQuery and JavaScript and Bootstrap's JS component methods to control the behavior of the components.
-
Write JavaScript code taking advantage of the Bootstrap's JS component methods and JQuery methods for controlling Bootstrap JS components
Let us now spend some time trying to understand how Bootstrap and jQuery work together to support the Bootstrap's JavaScript components.
As we have understood from the previous module, Bootstrap has a number of interesting JavaScript-based components.
And we also learned that Bootstrap's JavaScript-based components are all enabled using jQuery as the support.
Many of these plugins are written in jQuery.
Their plugins themselves can be individually included or you can include all the plugins together as a single unit. In the exercises, we have been including all the Bootstrap's JavaScript plugins into our webpage.
We also saw this graphic in the previous module to help us understand the relationship between JavaScript, jQuery, and how the Bootstrap's JS-based plugins are implemented.
We saw that Bootstrap's JS components ox in the jQuery-based components and make it easy for us to make use of them in our webpage.
We also learned that the Bootstrap's JavaScript-based components can be used in your webpage without writing a single line of JavaScript code.
This is where the data-\ attributes come to our rescue.
You can use the various attributes that we saw in the previous module to enable many of our Bootstrap's JavaScript-based components.
In case you want more flexibility with your JavaScript components, then the full flexibility of that JavaScript-based API is available for all the Bootstrap JavaScript components.
You can write code using the jQuery syntax and then use that together to control your Bootstrap's JS components.
We're going to explore that in a little more detail in this module.
Before we proceed further, let me give you a quick tour of jQuery and its syntax so that we understand some of the code that we'll write in this module.
jQuery is a very powerful, lightweight JavaScript-based library that provides a number of different components.
It is a feature rich library that enables writing code for doing HTML or DOM manipulation.
It allows you to do CSS manipulation.
For example, you can apply CSS classes to various HTML elements through the jQuery code.
It allows you to handle HTML events, and when those events occur you can implement methods that are being executed in response to the occurrence of these events.
jQuery also supports various effects and animations that can be applied to your HTML elements.
Also jQuery enables you to interact with a back end server using AJAX.
Although we won't to explore that in too much detail in this course.
We also learned that Bootstrap's JavaScript components are built upon jQuery.
This components make use of many of the jQuery methods that are available to implement the various features that this Bootstrap JavaScript components support.
Let's briefly understand jQuery Syntax.
Now if you have seen some of the code that we included in the previous module, specifically for the tool tip, you remember that there was something that started with a dollar sign.
The jQuery Syntax is all implemented using the dollar sign.
The dollar sign at the start of a sentence implies that this defines and accesses jQuery's library plugins that are available.
Now whenever we use the dollar sign, you also supply a selector.
The selector is used to query and find those HTML elements within your DOM to which you want to apply this manipulation.
There are various ways of doing selections.
We'll look at them in the subsequent slide.
Then the third aspect of a jQuery statement is the action that you specify.
Now that you select an HTML element, what kind of an action you want to be performed on that element, so that is the third part that you will see.
As an example you can specify a jQuery statement like $("p") within codes, and then .hide.
In this case what it implies is that, select all those HTML elements which are the paragraph elements, starting with the p tag, and then those elements hide those elements.
The action to be performed is the height, so this will result in all the p elements being hidden from your DOM, and consequently from the webpage that is rendered.
Similarly, you will see later on us using a statement like saying dollar, and then within quotation marks, #mycarousel, implying that you are specifying the ID of a specific HTML element, and then specifying carousel and pause.
We'll look at more details of what this actually does in one of the subsequent slides there.
But note the structure of the jQuery statement syntax there.
You specify the selector, and then you specify the corresponding action to be performed on the element that is selected by these selectors.
Let's take a look at Bootstrap jQuery example.
We'll go back to the previous example that we have seen earlier, where we introduce the tooltip.
When we introduce the tooltip, we specified script and then inside the script, we said $(document).
In this case the document means the entire document.
The selected here is for the entire document.
For the entire document, and then we'll specify ready.
Ready is the action to be taken.
When the document is ready, then execute this function that is specified as a parameter for this ready action there.
The function that we saw being used for the tooltip specified it as $, and then within brackets, it said, data-toggle=" tooltip".
Now here we are specifying that select those elements for which there is an attribute with data-toggle="tooltip".
And then for those elements that match this criteria,perform this action called enable tooltips for those elements.
And we close the function there.
This specifies that this particular script will be activated for those elements for which you have applied the data-toggle tooltip.
Basically for those HTML elements on which you have defined tooltips, you want the tooltip to be enabled there.
This is how we interpret this syntax of this jQuery example here.
Let's look at the various ways of specifying selectors.
As we realize from the jQuery statement syntax, we always follow dollar and then, within brackets, we specify a selector.
How do we specify selectors, what are the various ways you can specify selectors?
Here are some possibilities.
You can specify a selector by specifying any specific HTML element by specifying the tag.
You can say p, button, h4, h3, or any of the HTML tags directly.
And so in that case the HTML tag name is specified within quotes and that'll form your selector.
When you apply a selector like this, you're saying all the elements that match this criteria will be selected.
Then you can also specify a specific HTML DOM element by specifying the ID of that element by using the #id.
For example, we use #myCarousel.
In this case you're saying select that particular HTML element for which the ID is myCarousel.
That's the other way of selecting, by specifying an ID for an element.
The third possibility is to select elements by the classes which have applied to that.
For example, you can see within brackets if you say .btn, meaning all the HTML DOM elements for which you have applied the button class will be selected.
Or you can even further qualify by specifying a group of classes by saying .btn.btn-default, meaning that those elements for which button class and the button default class have both been applied.
That's another way, by using the classes that are applied to the HTML element.
The other possibility is to specify an attribute that has been applied to HTML element.
For example, you can say attributes are specified within square brackets here.
You can see within square brackets href, and include it in the quotation so which means that all those HTML elements for which href attribute has been applied.
Similarly, you can say data-toggle="tooltip", which essentially saves all those elements for which the data-toggle tooltip attribute has been applied.
Also, selecting the current element for which you want to do something by saying $(this).
Meaning, for the current element that has already been selected, for this, do something.
And a lot more other possibilities.
These are some examples, so you will see me using some of these in the examples and the exercise that follows.
Not only that, you can also specify jQuery events, events based on which you respond.
For example, the user interactions with various elements on your webpage will cause DOM events.
For example, with a mouse, the user may click at a particular location.
Or double-click, or when the mouse enters and leaves a specific location.
For keyboard you can respond to key presses, keydown and keyup.
Events for forms, when the form is submitted, when there is a change in a particular input element value, and when a particular element is focused upon, and so on.
We can even talk about the entire document.
Upon the loading of the document, upon resizing the document, upon scrolling or unloading the document, you can respond to those events.
In that case, the jQuery Event Methods that are supported include ready, click, dblclick, mousedown, on, and so on.
These are all the event methods that will be executed upon occurrence of any of these events there.
Let's take an example of the Bootstrap's Carousel to see how JavaScript code can be written to control the carousel actions.
For a carousel, you saw already from the previous module, index size. We used all these attributes.
We used the attribute data-slide="prev|next", or we said data-slide-to and then specified the specific slide number, where it says data-ride+"carousel".
And then we've specified data interval, the interval for the sliding action to take place.
For the carousel you can do things like, for example, you can specify JavaScript based controls.
You can see $, and within brackets specify to select those elements, the carousels, that are included in your page by specifying .carousel.
Meaning all those elements for which the carousel class has been applied, and then following that you use the .carousel to specify something.
As an example you will see me using something like this in the exercise that follows.
We'll say .carousel and carousel, and inside there you would specify interval:2000, meaning set the interval for the sliding to be 2000 milliseconds.
Or two seconds, in this case.
That way you control or modify a particular property of the carousel JavaScript element there. The carousel also supports many other controls.
For example, you can say carousel('cycle'), meaning start cycling the items from left to right.
You can say carousel('pause'), to pause the sliding action of the carousel.
Then you can say carousel(number), so it cycles the carousel to that particular carousel item.
And then you can say carousel('prev'), carousel('next') to go to the previous item and the next item in my carousel.
These can be invoked directly from our JavaScript code.
Similarly, when the JavaScript carousel item is in your webpage, it causes various events.
And based on the occurrence of these events, you can respond.
For example, you can say slide.bs.carousel.
This particular event will be fired when the slide instance method is invoked.
Similarly, slid.bs.carousel means this event is fired when it has completed the slide transition to the next item.
Within your code you can specify something like $("#myCarousel").on('slide.bs.carousel'.
Meaning that when that slide action starts, then invoke this function, and then do something inside that function there.
This kind of code can be returned also for responding to the events that are caused by your carousel's behavior.
Having considered some of these examples, we'll go on to an exercise where we will actually write some JavaScript based code to control our carousel.
We will write code to include a couple of buttons within our carousel, which will be used to control the sliding action of the carousel.
Which means that we can pause and resume the sliding action of our carousel. And we'll activate these buttons from JavaScript.
Many of the Bootstrap's JavaScript-based components provide us with a mechanism to control some of the features of these components by writing JavaScript code, in particular, by writing code Using the jQuery syntax.
We're going to explore this index exercise by using some JavaScript-based controls for our Carousel that we included in the index.html page in the previous exercise.
In the previous exercise, we introduced this Carousel into our index.html page.
What I would like to do in this exercise is to introduce a couple of control buttons into this Carousel, and then use JavaScript to be able to activate these buttons.
The buttons would be used to pause and play the sliding action of this Carousel.
Including the button in our Carousel here, we can click a button to stop the sliding action of the Carousel, and then we can click another button to resume the sliding action of the Carousel.
That is what we can explore in this exercise.
To get started on this exercise, we will go to the index.html page.
And right after the left and right controls of our Carousel, I will introduce a div with the class button group.
This will enclose a button group of two buttons here, and then with an ID of, carouselButton and close off the div there.
Now, inside this, I'm going to add in two buttons.
Let me add in one button with the class btn, btn-danger, btn-small, and an id of carousel-pause.
This is going to act as the pause button, slows off the button there.
And for this button, I'm going to introduce a font as an icon with the class fa fa, pause, and close off the span.
This will introduce a pause button into the group of Carousel buttons.
I'm going to copy this and paste it again to create another button.
That second button, I'll call btn btn-danger btn-sm, and then this would be carousel-play.
And the span class, the button would be if it play here.
Let's say the changes and go and take a quick look at it in the webpage.
Taking a look at the buttons as they exist in our browser, you can see that these two buttons are now positioned to the left corner of my Carousel.
I would like to reposition these buttons to the right edge, so that it doesn't cause this blue, empty space underneath the image here.
Let me use a couple of CSS properties to reposition these buttons to the right column of the Carousel.
Going to that style start CSS file, let me introduce some CSS code here.
For the element with the ID carouselButtons, I'm positioning it to the right edge and bottom, 0 pixel here.
These two and then the position is absolute.
This will position these buttons to the right corner of my Carousel.
Obviously, just introducing the buttons into the Carousel will not serve any purpose.
Now, we're going to take advantage of the JavaScript controls that the Carousel provides by writing a little bit of jQuery code at the bottom of index.html page to make these buttons do their work.
We want to be able to pause and resume the sliding action of my Carousel.
Going to the bottom of the index.html page, let me introduce some script here.
This script should contain some JavaScript code written in jQuery syntax.
I'm going to say, $(document).ready(function), And this function should contain a couple of functions here to activate the buttons.
I would say, mycarousel.
This is the ID of the carousel that we are introduced, so we would say, carousel, Interval: 2000.
What this does is it sets the sliding interval of the Carousel to 2000 milliseconds or 2 seconds.
I'm making it a bit faster for the sliding action to take place in the Carousel.
Continue with the jQuery code here. I'm going to now activate that pause button, so I will say carousel-pause.
That's the id I gave to the pause button there.
That's the reason for giving the id.
I want to activate the pause button. So I say when the user clicks.
You can see how to read the syntax.
This says, for the carousel-pause button, if a click action is done by the user, then execute this particular function that I specify inside this code here.
What is the function that I want to do? I want to be able to, Pause the Carousel.
We would say, carousel('pause').
Now you see how you have used the jQuery-based controls.
The JavaScript controls that are given for the Bootstrap Carousel component and written some code to be able to control the Carousel.
Similarly, I want to be able to activate the play button.
When the play button is clicked, I want the sliding action of the Carousel to resume.
I'm going to simply copy this code, paste it there.
And then I would say carousel-play, click function my carousel and then the function says carousel('cycle').
That's the way you specify that the Carousel should resume sliding like before.
This one, this function we are attaching to the play button here.
With this two, our function's introduced inside this document ready function.
You're all set for the Carousel to be activated, and the two buttons to be able to control the behavior of our the Carousel.
Let's show the changes, and go and have a look at the behavior of our Carousel.
Going to our page, you now see that your Carousel is moving very fast, because I set the interval to 2,000 milliseconds or 2 seconds.
Every two seconds, you will see the sliding action of the Carousel.
This is definitely annoying. So let me pause that by clicking on the pause button.
When you click on the pause button, your Carousel's sliding action is paused.
Because when you click on the pause button, then the function that we introduced in the JavaScript code comes into action and then pauses the movement of the Carousel.
Now, if you want to resume, the click on the play button and then the Carousel should resume its motion.
As you can see, the moment you click on a play button, the carousel starts moving.
Now, of course, you can improve more upon how you create these buttons and so on, but this is a simple way that we can introduce to control our Carousel.
This exercise illustrates to you how we can use JavaScript code to be able to control our Bootstrap JavaScript-based components.
This is a good time to do a comment of your code with the message Bootstrap jQuery.
Many of the Bootstrap's JavaScript-based components provide us with a mechanism to control some of the features of these components by writing JavaScript code, in particular, by writing code Using the jQuery syntax.
So we're going to explore this index exercise by using some JavaScript-based controls for our Carousel that we included in the index.html page in the previous exercise.
In the previous exercise, we introduced this Carousel into our index.html page.
What I would like to do in this exercise is to introduce a couple of control buttons into this Carousel, and then use JavaScript to be able to activate these buttons.
The buttons would be used to pause and play the sliding action of this Carousel.
Including the button in our Carousel here, we can click a button to stop the sliding action of the Carousel, and then we can click another button to resume the sliding action of the Carousel.
That is what we can explore in this exercise.
To get started on this exercise, we will go to the index.html page.
And right after the left and right controls of our Carousel, I will introduce a div with the class button group.
So this will enclose a button group of two buttons here, and then with an ID of, carouselButton and close off the div there.
Now, inside this, I'm going to add in two buttons.
So let me add in one button with the class btn, btn-danger, btn-small, and an id of carousel-pause.
So this is going to act as the pause button, slows off the button there.
And for this button, I'm going to introduce a font as an icon with the class fa fa, pause, and close off the span.
So this will introduce a pause button into the group of Carousel buttons.
I'm going to copy this and paste it again to create another button.
That second button, I'll call btn btn-danger btn-sm, and then this would be carousel-play. And the span class, the button would be if it play here.
Let's say the changes and go and take a quick look at it in the webpage.
Taking a look at the buttons as they exist in our browser, you can see that these two buttons are now positioned to the left corner of my Carousel.
I would like to reposition these buttons to the right edge, so that it doesn't cause this blue, empty space underneath the image here.
So let me use a couple of CSS properties to reposition these buttons to the right column of the Carousel.
Going to that style start CSS file, let me introduce some CSS code here.
So for the element with the ID carouselButtons, I'm positioning it to the right edge and bottom, 0 pixel here. So these two and then the position is absolute.
So this will position these buttons to the right corner of my Carousel.
Obviously, just introducing the buttons into the Carousel will not serve any purpose.
Now, we're going to take advantage of the JavaScript controls that the Carousel provides by writing a little bit of jQuery code at the bottom of index.html page to make these buttons do their work.
We want to be able to pause and resume the sliding action of my Carousel.
Going to the bottom of the index.html page, let me introduce some script here.
So this script should contain some JavaScript code written in jQuery syntax.
So I'm going to say, $(document).ready(function), And this function should contain a couple of functions here to activate the buttons.
So I would say, mycarousel.
This is the ID of the carousel that we are introduced, so we would say, carousel, Interval: 2000.
So what this does is it sets the sliding interval of the Carousel to 2000 milliseconds or 2 seconds.
So I'm making it a bit faster for the sliding action to take place in the Carousel. Continue with the jQuery code here. I'm going to now activate that pause button, so I will say carousel-pause.
So that's the id I gave to the pause button there.
So that's the reason for giving the id.
So I want to activate the pause button.
So I say when the user clicks. So you can see how to read the syntax.
So this says, for the carousel-pause button, if a click action is done by the user, then execute this particular function that I specify inside this code here.
What is the function that I want to do? I want to be able to, Pause the Carousel.
So we would say, carousel('pause').
So now you see how you have used the jQuery-based controls.
The JavaScript controls that are given for the Bootstrap Carousel component and written some code to be able to control the Carousel.
Similarly, I want to be able to activate the play button.
So when the play button is clicked, I want the sliding action of the Carousel to resume.
So I'm going to simply copy this code, paste it there.
And then I would say carousel-play, click function my carousel and then the function says carousel('cycle').
That's the way you specify that the Carousel should resume sliding like before.
This one, this function we are attaching to the play button here.
With this two, our function's introduced inside this document ready function.
You're all set for the Carousel to be activated, and the two buttons to be able to control the behavior of our the Carousel.
Let's show the changes, and go and have a look at the behavior of our Carousel.
Going to our page, you now see that your Carousel is moving very fast, because I set the interval to 2,000 milliseconds or 2 seconds.
Every two seconds, you will see the sliding action of the Carousel.
This is definitely annoying. So let me pause that by clicking on the pause button.
When you click on the pause button, your Carousel's sliding action is paused.
Because when you click on the pause button, then the function that we introduced in the JavaScript code comes into action and then pauses the movement of the Carousel.
Now, if you want to resume, the click on the play button and then the Carousel should resume its motion.
As you can see, the moment you click on a play button, the carousel starts moving.
Now, of course, you can improve more upon how you create these buttons and so on, but this is a simple way that we can introduce to control our Carousel.
This exercise illustrates to you how we can use JavaScript code to be able to control our Bootstrap JavaScript-based components.
This is a good time to do a comment of your code with the message Bootstrap jQuery.
In the previous exercise, we saw how we can leverage the JavaScript-based controls that are provided for the Bootstrap JavaScript components in order to control the behavior of the components.
In particular, we saw the use of the carousel and how we were able to introduce two buttons to control the cycling behavior of the carousel.
Now, I'm not fully satisfied with that implementation.
I would like to now collapse the whole thing into one single button that can both indicate the current behavior of the carousel and also be able to control the carousel.
Let's see how we can leverage further jQuery code in order to achieve this, in this exercise.
To achieve that, we'll go back to the code in index.html where we defined the two buttons.
I'm going to now remove this div for the button group because we are going to have only one single button instead of two buttons.
I have removed the div around the two buttons.
I'm also going to delete one of the buttons, because we're going to work with just a single button for this exercise.
Let me change the indentation.
Now, this particular button that we have there, I'm going to rename this button as carousel Button.
We will start out with this button being a button with the pause icon.
We're going to flip the icon for this button through JavaScript code.
How do we do that?
Taking a look at our web page, we'll now see that we have one single button here, which is currently indicating the pause there.
Now, my hope at the end of this exercise is to turn this button into a single control whereby if I click on this button, it will pause the cyclic behavior of the carousel, and then simultaneously turn this button into a play button, meaning that this icon will be replaced with the play icon.
That this single button indicates what the current state of the cyclic behavior of my carousel is.
How do we do that? We need to go and edit the JavaScript code in order to achieve that.
Going down to the JavaScript code at the bottom of index.html page.
Here, we had this script that we had included earlier in order to activate the two buttons there. I'm going to edit this code to make use of that single button that we have there.
Coming down here, I'm going to remove this second part because we only have one single button now here, which is the carouselButton, and whenever that is clicked, you need to do something in response to doing that.
If the carousel button is clicked, then what do you do?
Now, fortunately, depending on whether the button is a Play button or a Pause button, we'll be able to take an appropriate action.
But how do we know whether it is a Play button or a Pause button?
This is where we're going to make use of some jQuery code in order to identify whether this is a play button or a pause button.
To help us to identify this, we're going go inside here and then use an if statement, and inside there, I'm going to test to see whether this is a play or a pause button.
Here I say, carouselButton.children span.
Which means that, for this carousel button, inside where if there is an element with the span tag, so we obviously know that in our carousel button, we had the span tag which contained the Font Awesome icon there.
For that span tag, we're going to check hasClass.
We're going to check this hasClass, and then the class that we're going to check for is fa-pause.
Which means that, if the span tag has the fa-pause class, then we know that this button is currently acting as the pause button.
Obviously, when the button is clicked, the user is expecting that the cyclic behavior should be paused.
That's what we identify here.
You now see that we are writing some more advanced JavaScript code using the jQuery syntax in order to make this work correctly.
Inside here, so what do I need to do?
Now, so which means that if the button is currently a Pause button, then, obviously when the button is clicked, you want to pause the carousel.
Then, in addition, we want now to be able to flip that icon from a pause icon to a play icon.
What we will do is, we will say right there after this, we'll say $carouselButton.children span, and then we'll say, removeClass.
We're going to remove the pause class. So notice how this works. We're going to remove the pause class from that, and then, we're going to add the playClass.
That way your button's icon is now going to be flipped from a Pause button to a Play button.
We're going to remove the pauseClass.
I'm going to just copy this code and then paste it right there and then do the edit to this code.
Same thing, for the carouselButton for the children span, I'm going to instead now of the removeClass, I would say addClass, and then fa-play.
That way, what we are doing is, we are flipping that button from a Pause button to a Play button.
Also, we are pausing the cycling behavior of the carousel.
Now, if this is not the case then, it should be a Play button so the opposite effect should be introduced.
Then, I'm going to simply copy this code, and then do the other tests for the situation where the button is a playButton.
I would say else, now obviously, I don't need this if here but just to be doubly sure, I'm going to put that in there.
Because there are only two possibilities, either it's a Pause button or a Play button, but just for my reassurance, I'm going to put that as an fa-play there. Now inside there,
I'm going to change this from pause to cycle.
Because from the previous exercise, you remember that if you want the cycling behavior to resume, you would have to set the carousel action to be cycle.
Then similarly, for the remaining two statements, I am going to remove the playClass and then add the pauseClass.
Notice how we are using a little bit of advanced jQuery code to be able to dynamically change the buttons icon, and at the same time, induce the appropriate cycling behavior on our carousel.
Taking a look at our web page, you now see that my carousel is cycling, and you see that this button is currently a Pause button.
When I click on this button, notice how it changes from Pause to a Play button there, and then simultaneously, my cycling behavior of the carousel is paused.
At this point, my carousel will remain paused at that location until
I click the button.
Now, if I click this button again, note the change from the Play button to a Pause button, and then the cycling behavior of the carousel will resume on the spot.
Using a single button now, I'm able to both control the behavior of the carousel and also simultaneously, display the current state of my carousel's cycling behavior.
If that is a Pause button, that means that my carousel is currently cycling. If that is a Play button, then my carousel is paused.
To resume it, I will have to click on the button.
This is one more additional change that you can do to the exercise.
Now, you see how in our code we made use of the hasClass method, and we also saw the use of the removeClass and addClass methods, jQuery methods that we applied in order to manipulate the DOM to reflect the behavior as pertinent in this particular case.
With this, we complete this exercise. It's time for you to do a Git commit with the message more Bootstrap and jQuery.
In this exercise we extend the previous exercise of controlling the carousel by using more JQuery and JavaScript to write JavaScript code to control the JS component. At the end of this exercise you will be able to:
-
Use Bootstrap's JS component methods together with JQuery and Javascript
-
Use JS code to control the Bootstrap JS component
-
We will modify the carousel control buttons in the carousel component that we already included in the index.html page. Instead of two buttons, we will use a single button that will indicate if the carousel is currently cycling or paused. Furthermore we can use the button to toggle the carousel cycling behavior:
-
Modify carousel control button!
Modify carousel control button!
<button class="btn btn-danger btn-sm" id="carouselButton">
<span id="carousel-button-icon" class="fa fa-pause"></span>
</button>
We are adding a single button inside a button group with the ID carouselButton. The buttons will show either as a pause or play button based on the current behavior of the carousel.
- Finally we modify the JavaScript code to control the behavior of the carousel and also show the appropriate button:
We modify the JavaScript code:
$("#carouselButton").click(function(){
if ($("#carouselButton").children("span").hasClass('fa-pause')) {
$("#mycarousel").carousel('pause');
$("#carouselButton").children("span").removeClass('fa-pause');
$("#carouselButton").children("span").addClass('fa-play');
}
else if ($("#carouselButton").children("span").hasClass('fa-play')){
$("#mycarousel").carousel('cycle');
$("#carouselButton").children("span").removeClass('fa-play');
$("#carouselButton").children("span").addClass('fa-pause');
}
});
- Do a Git commit with the message "More Bootstrap JQuery".
In this exercise we learnt more about Bootstrap's JS component methods and how they can be used together with JQuery and JavaScript to control the behavior of a Bootstrap JS component.
In this lesson we explore CSS preprocessors, Less and Sass. We learn the salient features of both the processors and see how we can generate CSS from the Less and Sass code. At the end of this lesson, you will be able to:
-
Write Less and Sass code to define your CSS classes
-
Compile the Less and Sass code into the corresponding CSS classes
This particular lesson deals with CSS preprocessors, in particular Less and Sass.
Now obviously, these topics have more to do with CSS and defining CSS classes, but it would be inappropriate for me to complete a Bootstrap course without delving a little bit into CSS preprocessors.
Simply because Bootstrap is built using Sass for its source.
We'll briefly examine CSS preprocessors, what they are, how they are useful in defining CSS classes, and why Bootstrap makes use of them.
As you probably understand from your previous experience with CSS, CSS is great for defining styles and repeatedly applying these styles to various HTML elements.
And that's the way we use CSS when we define our web pages.
But when you look at the CSS code itself, you begin to quickly realize the limitations of CSS.
Especially if you are coming from a programming background, you realize that CSS doesn't have what you typically expect in a programming language, like variables, nesting of selectors, variables, expressions, and functions.
This means that writing CSS code becomes cumbersome, and maintaining CSS code becomes cumbersome because of lack of the traditional programming language-like syntax. Now, this is where the CSS preprocessors come to our rescue.
There are several popular CSS preprocessors that try to address some of the shortcomings of CSS by supporting many of these features.
Two in particular that is of interest to us is Less and Sass.
We will look at these two in more detail in this lesson.
Now, when you define your CSS classes using one of these preprocessor languages like Less or Sass, then they eventually have to be converted into CSS, but this can be done automatically before the CSS gets used in your web page.
What these preprocessing languages bring to us is more programming language-like syntax, as we will see in the next few slides.
We'll examine Less and Sass briefly.
In particular, the reason for us to take a look at this is because Bootstrap itself uses Sass for defining its source for its CSS classes.
And so if you go into customizing Bootstrap, then you would have to work with Sass code.
Bootstrap 3, which was the preceding version of Bootstrap, used Less, and hence, I thought it would be an appropriate thing to cover both Less and Sass, because they are pretty much similar to each other in terms of their capabilities and the way the syntax is defined.
The typical features that CSS preprocessors bring is the support for variables, nesting selectors, expressions, functions and mixins.
We will look at some of these with some examples in the next few slides.
The first thing that we'll look at is variables.
Now in many CSS classes that you define, you might have some repeated use of certain quantities.
It might be more worthwhile if you define some variables that hold these quantities and use these variables in defining your CSS classes.
That's where variables come to your rescue.
Here, we'll look at both Less and Scss code.
Scss is a version of Sass, more popular version of Sass syntax, so that's why I concentrate on Scss here.
If you define variables in Less, you will proceed the name of the variable with an @ sign.
In case of Scss, you will use a dollar sign before the variable name.
And once you define those variables, you can then use those variables when you define the classes.
As you see in the example, where we define the navbar-inverse as background, or the carousel-item's height as variables.
Now, the advantage of defining variables at the start of your CSS class is that there is a single point where you can update a value, and it will automatically update all the CSS classes that use this variable.
Typically the way we use variables in programming languages.
Variables in the CSS preprocessorlanguages can also have their own scope.
Very often when you define CSS classes, especially when you have to define classes that are nested inside other classes, then, pretty soon the CSS code gets very cumbersome.
This is where nesting is supported by your CSS preprocessors.
As you can see, you can define for example, a carousel class, and inside a carousel class, you can define a carousel item class.
And similarly, the image subclass inside the carousel item class.
Here you can see that each of these is nested inside a prior class.
With variables, you can hold one value at a time in a variable.
Suppose you have a group of variables that summed up together declare a set of CSS declarations, that is where we make use of mixins.
In Less you define a mixin by giving it a name, and in Sass you simply precede that with an @mixin in front of the name of the mixin declaration.
And inside a mixin, you can define a bunch of CSS declarations that can then be reused for various CSS classes.
As you see in this example here, we define the zero margin as a mixin, both in Less and Sass.
Note the minor variation in the syntax in each of those cases.
And then, you can then use this mixin in defining additional CSS classes.
Here you can see that for the row header, we define the zero margin as a mixin in the row header, which means that all these properties from the zero margin will be inherited by that row header class.
Mixins themselves can take on additional parameters if you so wish to define them.
In this case, I'm defining a variation of the zero margin mixin that we saw in the previous slide.
Here, this zero margin mixin takes two parameters, pad up down and pad left right.
And with Less, you can even specify the default value for it, but with Scss you need to explicitly specify the values.
Here we are defining two different CSS properties, the margin and padding, and then the padding itself uses the parameters for our mixin there.
In that case, you can use these mixins as you see in the two CSS classes defined below the row header and the row content by specifying their parameter values when you include that mixin into your CSS cluster.
Not only that, you can even perform mathematical operations on predefined variables when you use them inside your CSS classes.
Here you can see that I have defined two different carousel items with two different sizes, and so you can see that the heights of each one of them is defined differently.
In one case I'm using the predefined height, in another case I am multiplying that height and then using it to define the height property inside my carousel item for the item-large class.
This kind of mathematical operations on variables is also allowed in CSS preprocessor languages.
Other features that the CSS preprocessors include are functions that allow you to define mathematical functions, Less strings.
You can also do color operations and color blending operations using these functions and make use of them when you define your CSS classes.
This is a bit advanced so I'm not going into too much of detail there.
Also, you can input predefined CSS preprocessor classes into other classes.
For example, if you've a Less class as defined, and you can input that file into another Less file.
Similarly, if you have defined Scss files, then you can import them into other Scss files using the import operation.
The syntax is the same for both Less and Sass.
Now that we have seen some features of the CSS preprocessor languages, let's now examine how we can actually make use of them by doing a couple of exercises.
First, we'll do an exercise based upon Less.
Then we'll follow that up with an exercise based on Sass.
It's time to move on to the next exercise, called Exercise: Less.
Something that you wish your doctor will tell you when you visit him or her the next time.
Nevertheless, let's examine less in more detail now to understand how we can define CSS classes using the less preprocessor syntax and then automatically generate the corresponding CSS classes from our less classes.
To get started, let's go to our project in the Text Editor and then inside the CSS folder, I'm going to rename this styles.css file as styles-old.css.
I'm going to save my current version of the styles.css file because now they will write less code and SCSS code and then automatically generate the styles.css file by compiling these CSS preprocessor languages.
After doing this, then in my CSS folder, we'll create a new file named styles.less.
And inside here, I will define my less code.
Let's first define some less variables.
I'll say, lt-gray: ddd and so on.
You can see that I have added in a few more less variables here.
I defined background dark to be first value, background light and background pale and also one more variable called carousel-item-height as 300 pixel.
I'm going to make use of these variables when I define my CSS classes later.
Let me now add in a Mixin for my less file called zero-margin and I will define pad-up-dn and pad-left-right, 0px being the default value and then in here, I set margin: 0px auto, padding: pat-up-dn and pad-left-right.
With this, I have defined the Mixin that I'm going to make use of in my CSS classes that we'll define later.
And this carries two parameters pad-up-dn and pad-left-right.
Next, I will add in a few more CSS classes so I start out with row-header and define this as zero-margin.
Let me add in a few more CSS classes and then come back to have a look at them.
Here, I have defined yet another CSS class using the zero-margin Mixin with the parameters 50 pixel and 0 pixel, a footer where I define the background color using the variable that have defined earlier as background-pale and then jumbotron with the zero-margin Mixin and the background color defined as background-light, and some of these other ones which are standard CSS classes, which I've included there because I'm going to make use of them in my web page and then you have navbar-dark for which the background color I did define us background-dark.
And the tab-content for which again you see me using the variable light gray for the border color here.
Next, I add in the carousel class here for which I d