How to Create Amazing UI with Angular-Material, Bootstrap and Font-Awesome

In this simple steps, I would show you how you can create amazing UI design using Angular-Material and Bootstrap.

The video lesson is available here

We would be using three different libraries:

• Bootstrap
• Angular Material
• Font Awesome

So simply create and Angular application. Then use the commands below to add the libraries to your project.

npm install font-awesome --save

npm install bootstrap --save

ng add @ng-bootstrap/ng-bootstrap

npm install angular-material --save

After this, you need to add the following import statements to your Styles.css

@import "~bootstrap/dist/css/bootstrap.css";
@import "~font-awesome/css/font-awesome.css";

You can then create a home component. See how to do this here.

Next head to the bootstrap website and copy one of the starter templates.

Place the template in the app.component.html file.

Now let’s work on the home component

First, you need to note that everything must be wrapped inside a <div> tag with container class.

Add div tag each with a class. Inside this div tag, add three more div tags. The inner div tag will have a class “col-sm”. This means we a creating a layout of 1 row and four columns. Later, we can add more rows or columns. Here’s what you have at now:

  <div class="row">
    <div class="col-sm">
      Column 1
    </div>
    <div class="col-sm">
      Column 2
    </div>
    <div class="col-sm">
      Column 3
    </div>
    <div class="col-sm">
      Colunm 4
    </div>
  </div>

Add an Angular-Material Button

Now we would add and angular-material button. This will replace the ‘Column 1’ text.  Actually a link that looks like a button!  The markup is shown below:

  <a href="/friends"
     role="button"
     class="btn btn-outline-primary btn-lg btn-block text-center">
    <span><i class="fa fa-users"></i></span>
    <br>Friends
  </a>

Then you need to add this style to your Styles.css to adjust the display.

.container{
  margin-top:5%;
}

Now you can copy this button to the other remaining 4 columns.

You can use the code below to adjust the size of the Font-Awesome icons

.fa{
  font-size: 50px;
}

Add Some Cards

Now we would add three cards.

So simple create a row with three columns as you did earlier.

Since we would be using some images, we need to create a folder inside the assets folder. Name this folder images. Add all the images you want to use inside this folder.

<div class="card" style="width: 18rem;">
  <img src="/assets/images/horse.jpg" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">Cute Horse</h5>
    <p class="card-text">Some quick example text's content.</p>
    <a href="#" class="btn btn-primary">View Horse</a>
  </div>
</div>

Image Sizing

There a number of ways to resize your images. This is because, the images have to be of the same size. The easiest way is to add an the height and width property to all the image tags. See the code below

 width="200px" height="160px" 

Add a Jumbotron

A Jumbotron is a large area containing text and other components. It’s easier to understand by simply working with it.

So go to the bootstrap website and copy the code for a Jumbotron. It would be like shown  below:

<div class="jumbotron">
  <div class="container">
    <h1 class="display-3">Simple Amazing UI!</h1>
    <p>This is a template for a simple. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
  </div>
</div>

At this point, you can adjust the jumbotron size using the style below:

.jumbotron{
  padding-top: 10px;
  padding-bottom: 5px;
  margin-bottom: 0px;
}

I’ll like to stop here, but I hope you could now play around with UI! I also recommend you watch the video for any clarification you need.