Archive

Posts Tagged ‘css-framework’

Angular 2: Adding bootstrap css framework

March 25, 2017 Leave a comment

In my previous post I showed you how to create an Angular 2 application using angular-cli tool. This post is a continuation of that and in this post I am going to show how to use node package manager npm to add bootstrap stylesheet and wire it up in the application.

I am going to open the nodejs command prompt and install the bootstrap css package to the project using the following command.

C:\>npm install ng2-boostrap –save

 

If you browse to the node_modules folder you can see the new folder bootstrap was created which contains all the stylesheets as shown below.

Bootstrap CSS added to the angular 2 project

In order to make the stylesheet available for the page we have to add the path of the file to the styles array which is defined in the .angular-cli.json file. Since it is an array you can add multiple stylesheets and the loader will take care of it.

.angular-cli.json

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ]

adding css location to the styles array

Now I am going to add some menu with the search text box and a jumbroton layout to give it a nice look.

<body>
  <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">NG Corporationa>
    div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Homea>li>
      <li><a href="#">Abouta>li>
      <li><a href="#">Servicea>li>
      <li><a href="#">Contacta>li>
    ul>
    <form class="navbar-form navbar-right">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search">i>
          button>
        div>
      div>
    form>
  div>
nav>
  <div class="container">
    <div class="row">
      <div class="jumbotron">
        <h1>NG Corporationh1>      
        <p>A place to use your creativity, innovation and passion to build exciting product for the world.p>
      div>
        <app-root>Loading...app-root>
      div>   
  div> 
body>

As you can see pretty standard bootstrap template and at the end we have our angular component with the custom selector “app-root”. Last thing we have to do is to run the following command in order to start the application.

C:\>ng serve

And here is the angular 2 application up and running with bootstrap styling.

bootstrap style applied to the website

Advertisement
Categories: Angular 2 Tags: , , , , , , , , , ,