The data is successfully loading onto the HTML page, however, the Bootstrap 4 styling does not seem to be appearing

https://i.sstatic.net/WVgwk.jpgI have a simple Angular application where hard-coded data is being rendered on the webpage in a basic format. However, when I try to apply Bootstrap styles and classes, nothing is appearing on the page. Can someone please help me correct the code below?

This is event.component.html:

<div class="media">
  <h3 class="h3-responsive font-weight-bold mr-3">{{ value.time }}</h3>
  <div class="media-body mb-3 ">
    <mdb-badge danger="true" class="text-center float-right">-</mdb-badge>
    <h6 class="mt-0 font-weight-bold">{{ value.subject }}</h6>
    <hr class="hr-bold mb-0 my-2" />
    <p class="mb-0" *ngIf="value.location">
      <mdb-icon fas icon="location-arrow"></mdb-icon>
      {{ value.location }}
    </p>
  </div>
</div>
<p class="p-3 blue-grey lighten-5 blue-grey lighten-5" *ngIf="value.description">
  {{ value.description }}
</p>

This is app.component.html:

   <div class="container">
      <div class="row">
        <div class="col-md-9">
          <div *ngFor="let event of events">
            <app-event [value]="event"></app-event>
          </div>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>

Answer №1

After conducting some research, here is what I discovered:

<div class="media">
  <h3 class="h3-responsive font-weight-bold mr-3">{{ value.time }}</h3>
  <div class="media-body mb-3">
    <span class="badge badge-danger text-center float-right">-</span>
    <h6 class="mt-0 font-weight-bold">{{ value.subject }}</h6>

    <p class="mb-0">
      <i class="fa fa-location-arrow solid" style="font-size:14px;"></i>  {{ value.location }}
    </p>
  </div>
</div>
<p class="p-3 " style="background-color: #D8D8D8;">
  {{ value.description }}
</p>

Upon closer inspection, I uncovered that some of the classes utilized were not from Bootstrap. It was fascinating to see how they were incorporated into a blog format. Through persistent effort, I managed to unravel this mystery!

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

Restricted information causes disruption in the PHP web design

I encountered a problem when attempting to limit the content of description. Here is what I tried: <?php $intDescLt = 400; $content = $arrContentList[$arr->nid]['description']; $excerpt = substr($content, 0, $intDescLt); ?> <div ...

What could be causing jQuery to fail to detect changes in the HTML code?

Whenever I trigger an Ajax request and update an attribute value, the DOM reflects the changes as expected. However, upon clicking the button again, the console displays the old attribute value. It seems like the markup isn't recognizing the change an ...

Disable audio playback on tab unfocus using Javascript/HTML

Is there a way to automatically mute a tab or video when it is not in focus? As a beginner, I am unsure how to accomplish this task. The audio source is currently a webm file embedded within a <video> tag. ...

Exploring ReactJS: Combining JSON data with HTML elements

Recently, I started learning ReactJS. As I'm iterating through JSON data, I realized I need to incorporate some links into it. This is how my JSON data is structured: "text": ["For more information on the functionalities of the platform and services ...

Ways to manipulate the placement of angular material 2 sidenav content to the bottom

I have been experimenting with various methods in CSS to override the existing side nav component in Angular Material 2. mat-sidenav-container { background: white; bottom: 0px !important; /* <---- no success */ } mat-sidenav { width: 300px; ...

Incorporating a secure and personalized "tracking code" feature into a PHP web application

My web application is built using vanilla PHP and MySQL, allowing registered users to create personalized profile pages. I want to implement a textarea form field in the control panel for users to input their custom tracking code (such as Facebook Pixel o ...

Discovering the closest date among the elements in an array

Currently, I am facing an issue while trying to identify the highest date within an array of objects which have varying dates assigned to each one. The code seems to be functioning well when the dates are above January 1st, 1970, however, any date prior to ...

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

CSS not working with fixed positioning

As part of a school project, I am required to utilize the position fixed property to correctly position the cookie statement at the bottom right of the screen. However, when I attempt to move the element, it does not seem to display properly. ...

Styling Your Text within Grid Boxes Using CSS

After creating a simple CSS Grid, I am struggling with placing text inside the tiles at a specific position. The concept is illustrated in this image: https://i.sstatic.net/13G7j.jpg I aim to have the text within the blue box. .tiles { display: grid ...

I prefer that my appearance doesn't revert back once styles have been applied

I am experiencing an issue with an image that I placed on my website. Here is what I have tried. #mysecond { width:100px; height:100px; background:none; position:relative; animation:mysecond 5s; -webkit-animation:mysecond 5s; /* Safari and Chrome */ -moz ...

The hyperlink for pulling information from a form field to populate a signature template webpage is not functioning properly

I've been developing a signature template page for our company's Intranet and have successfully implemented it with almost satisfactory appearance. My current challenge involves updating link information from my forms without altering the displa ...

Is there a method to identify if the dark theme is enabled in iBooks while working within an EPUB file?

Is there a specific code or feature that iBooks uses to enable the customization of certain sections within the book, such as changing to lighter colors when night mode is on? ...

Tips for implementing an active class for td within jQuery tabs?

I'm currently using Jquery tabs within a table, and it's working fine. However, I need to activate the td when its link is clicked. Here's my code: $(document).ready(function() { $(".vertical_tabs_menu a").click(function(event) { ...

The JavaScript creates a select box, but the value does not get sent when the form is submitted

When a user selects a value from the first select box, a second select box is dynamically created using JavaScript. This JS triggers a PHP file to query a MYSQL database for relevant items based on the initial selection. The issue I am facing is that the ...

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

Issue with selecting file not triggering input file selection event in KnockoutJS and HTML when the same file is selected

Struggling to find a solution using KnockoutJS instead of jQuery. When the same file is selected, the event doesn't fire. Here is an example of the HTML: <label class="upload"> <input id="documen ...

What is the best way to extract text that falls between two specific patterns using the preg_match_all function in PHP

I've been struggling to locate two specific HTML tags and extract the content in between them. When I search for each tag individually, they are found successfully, so I am confident that they are spelled correctly and do exist. However, I believe the ...

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...

Align both vertically and horizontally in the center of the body

I have two images aligned vertically inside a wrapper. How do I center the wrapper within the body? What is the best way to center my wrapper inside the body? <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> ...