April 16, 2021

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.

3.5 2 votes
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ani Gho
Ani Gho
8 months ago

Hey,
i completed the e2e its fantastic well planned, well broken down into segment very nice approach one of the best i have seen… just what you need to brush anything here angular [had been there before 5 years before]with spring boot [ i am backend developer so not new to me ]one of the best tutorial on you tube has real meat and stuff not just spiced up sitting in a jazzy room with all the decor and no meat 🙂 some videos i have watched…:( . You have great patience to do a video and a tutorial which is just amazing… not an easy task not for me coz when i am on job i am under the pump and the family ….having said that only 1 point in real apps we don’t use verbs all your url could be just students[noun]as;
so this is your controller i have modified…
@RestController
@CrossOrigin
public class FriendC {

@Autowired
private FriendS friendS;

@GetMapping(“/friends”)
public List getFriends() {
return friendS.getFriends();
}

@PostMapping(“/friends”)
public void addFriend(@RequestBody Friend friend) {
friendS.addFriend(friend);

}

@PutMapping(“/friends/{id}”)
public void updateFriend(@PathVariable(“id”) Integer id, @RequestBody Friend friend) {
friendS.updateFriend(friend);
}

@DeleteMapping(“/friends/{id}”)
public void deleteFriend(@PathVariable(“id”) Integer id) {
friendS.deleteFriend(id);
}
}

GANESH KUAMR
GANESH KUAMR
8 months ago

Hi Ani
@CrossOrigin(origins = {“http://localhost:4200”})