Angular CLI won't show CSS

Question

I use angular cli 1.4.3, node 6.11.3, npm 5.4.2, I want to read the records by using angular2. The output at localhost should be like this:

but the output that I get is like this:

here the html code:

<div class="row m-b-18px">
<div class="col-md-12">
    <!-- button to create new product -->
    <a (click)="createProduct()" class='btn btn-primary pull-right'>
        <span class='glyphicon glyphicon-plus'></span> Create Product
    </a>
</div>
</div>

<div class="row">
<div class="col-md-12">

    <!-- HTML table for our list of product records -->
    <table class='table table-hover table-responsive table-bordered'>

        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Category</th>
            <th>Actions</th>
        </tr>

        <!-- Use *ngFor directive to loop throught our list of products. -->
        <tr *ngFor="let product of products">
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>{{product.description}}</td>
            <td>{{product.category_name}}</td>
            <td>
                <!-- read one product button -->
                <a (click)="readOneProduct(product.id)" class='btn btn-
                primary m-r-5px'>
                    <span class='glyphicon glyphicon-eye-open'></span> Read
                </a>

                <!-- edit product button -->
                <a (click)="updateProduct(product.id)" class='btn btn-info 
                m-r-5px'>
                    <span class='glyphicon glyphicon-edit'></span> Edit
                </a>

                <!-- delete product button -->
                <a (click)="deleteProduct(product.id)" class='btn btn-danger 
                m-r-5px'>
                    <span class='glyphicon glyphicon-remove'></span> Delete
                </a>
            </td>
        </tr>
    </table>
</div>
</div>

Here the css code:

.m-b-18px{ margin-bottom: 18px; }
.m-r-5px{ margin-right: 5px; }
.w-40-pct{ width: 40%; }
.text-align-center{ text-align: center; }

Thank you

Answer 1

Looks like you do not include Bootstrap in your project. First, install it:

npm install --save bootstrap

Then go to angular-cli.json file, find styles properties and add "../node_modules/bootstrap/dist/css/bootstrap.min.css" so it looks like this:

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

Answer 2

Are you use the View encapsulation in the component?