Angular CLI is not displaying CSS

I am currently using angular cli version 1.4.3, node version 6.11.3, and npm version 5.4.2. My goal is to retrieve records using angular2 and display them on localhost. I expected the output to look like this:

https://i.sstatic.net/S8TVI.jpg

however, the actual output I am receiving looks like this:

https://i.sstatic.net/DDAM9.png

Below is the HTML code snippet:

<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 is the corresponding 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 for your assistance

Answer №1

It appears that Bootstrap is missing from your project. To add it, follow these steps:

npm install --save bootstrap

Next, navigate to the angular-cli.json file and locate the styles properties. Add

"../node_modules/bootstrap/dist/css/bootstrap.min.css"
to the list, like this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am having trouble with Node.js not properly handling POST requests and instead throwing a 505 error

I am a newcomer to nodejs and facing a roadblock in completing my project. I have been stuck for almost 2 days trying to resolve an issue with POST requests not being listened to by nodejs. Despite console logging, I keep getting a 405 error page. Here&ap ...

Could the reason behind the malfunctioning of the bootstrap tabs be due to my CSS files?

I'm looking to implement Bootstrap tabs in the sidebar of my website, but I'm running into an issue where the tabs aren't functioning properly within the sidebar-parsel-liste class. If I place the tab tags outside of this class, everything w ...

How to Stop Fixed Elements in iOS from Zooming

I'm currently working on a responsive website with a fixed header and navigation. Is there a way to allow users to zoom in on the page's content without affecting the fixed elements? Thanks for any help! ...

What is the best way to show the response data in an input text field within an HTML form?

I'm new to working with node.js and I've encountered an issue. I need to display the data of the currently logged in user in input fields. With the following code, I can access the data of the logged-in user and display it on the console: See O ...

Storing multiple text box values into a single application variable in C# - A Comprehensive Guide

[code page="c#"] Hdnano.Value = Application["AccountNum"].ToString(); $(document).ready(function() { $("#ano").on("blur", function() { var accountNum = $('textarea#ano').val(); $("#Hdnano").val(folioNum); }); &l ...

Creating a slanted polygon div that adjusts to different screen sizes: a step-by-step

Looking to create a slanted and responsive div similar to the example image provided. Any assistance would be greatly appreciated. ...

Consistently navigating back to the Home Page through AJAX

Can anyone assist me in resolving my issue? I have three files: index.php, process.js, and redirect_process.php. The index.php serves as my homepage with a form embedded in it. Whenever the submit button is clicked, the process.js script is triggered to v ...

Leveraging MUI v5 sx Prop for Applying Various CSS Properties Simultaneously (such as margin, border-radius, and more)

Is there a more efficient way to write the following code that utilizes the sx prop's access to spacing units? <MUIComponent sx={{ borderRadius: '4px 8px 12px 16px' }} /> Could it be written like this instead? <MUIComponent sx={{ b ...

Having trouble getting Owl Carousel to function properly within an AngularJS partial view?

I just started working on a single page application using AngularJs. Here is a snippet from my Index.html: <!DOCTYPE html> <html data-ng-app="myApp"> <head> <meta charset="utf-8> <meta name="viewport" content="width=devi ...

What is the method to restrict the coverage of the background color within a specific region in HTML?

I am still fairly new to html so I apologize if this is a very basic question for you. Here is the css file that is causing me trouble: .sidepanel-list{ margin-left: 10px; background-color:lightgray; Whenever I run the code, the background color s ...

Ensure that Selenium does not proceed until the content within a specific web element has been

Currently, I am utilizing Selenium to automate the process of uploading an excel file to a website. To ensure that the upload is fully completed before moving forward, I have implemented time.sleep(60). However, I am looking to enhance the efficiency of th ...

How to create a border using a repeated image with spacing between each repetition

Is there a way to create a dashed horizontal line from an image and adjust the spacing between each dash using HTML and CSS? I feel like using javascript for this would be excessive. https://i.sstatic.net/YiD9q.png I'm encountering this issue with t ...

Guide to making a dynamic clip mask with flowing trails on a digital canvas

I have successfully coded a dynamic path with trails similar to the one shown on However, when I try to replace ctx.fill() with ctx.clip(), nothing appears on the canvas. Here is the JavaScript code snippet I'm using – for the full code, visit http ...

Strategies for Resolving Table Alignment Problems using HTML and JavaScript

I am struggling to figure out how this dashboard will function as it is not a live website, but rather a tool that pulls data from a chemical analysis program and displays it in a browser view. My main issue is aligning two tables at the top of the page ...

divs adjust their size based on how many are placed in a single row

I'm in the process of developing an online editing tool, and I'm interested to know if it's feasible to adjust the size of a <div> based on the number of visible div elements. For instance, I have a row with three columns, each set at ...

What could be causing the Javascript Dynamic HTML5 Table to not display on the page?

I have a program that calculates the total price of products based on a specified quantity and updates an HTML table with these values. To demonstrate this, I am constantly taking input using an infinite loop. <!DOCTYPE html> <html> ...

Tips for aligning the list style icon perfectly with the text

I need help aligning text in the center of a customer list style image for an LI element. I've attempted using margins and paddings, but it hasn't worked. Here's the code and screenshot: HTML: <ul class="homeList"> <li>Over ...

Modifying text on input buttons using Javascript

Including product names, text forms, and buttons on a webpage is essential for showcasing products effectively. Each product is assigned an ID such as p1, p2, etc., while the input types are identified by i1, i2, etc. When users enter information into the ...

Applying a CSS class to a jeditable input field

Is there a way to apply a simple class tag to a jeditable input field? The developer's instructions on their website () suggest using the following code snippet under "How to style elements?": $('.editable').editable('http://www.exampl ...

The alignment of the Div element is incorrect following a fixed video in bootstrap

When I place a div after the video, the div appears on top of the video instead of after it. Additionally, when I change min-width: 100% to width: 100%, the content appears before the video when I resize the browser. body{ font-family: 'Mina', ...