Issue with Bootstrap card "sub-components" such as card-heading not functioning

I'm facing an issue while trying to integrate BlazorStrap into an existing .NET6 Blazor web assembly app. It seems like there is a problem with Bootstrap that needs to be resolved before I can get BlazorStrap to function properly.

Let's focus on a specific example:

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

The card appears with a border and shadow, but the content inside the card doesn't seem to be styled.

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

Anyone have any solutions?

Check out the source here

Test it here

Expected output (based on Bootstrap example):

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

cssblazorbootstrap-5blazor-webassemblyblazorstrap

Answer №1

My mistake was using the wrong link for the bootstrap css file

fix code

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

Troubleshooting: ReactJS CSS Class Issue

I'm fairly new to working with ReactJS and I've encountered an issue while trying to create a class for a specific form. Below is the code I've written: import React, { Component, PropTypes } from 'react'; import s from './s ...

javascripthtmlcssreactjs

Disarrayed image in absolute position on my webpage

I have a website with an auto-resizing background, but I am struggling to have a fixed black bar at the bottom of the page. Everything looks good when the browser window is maximized, but as soon as you scale it down and start scrolling, the black bar alm ...

htmlxhtmlcss

Properly extending the functionality of an HTML widget

Understanding HTML and CSS layout is still a mystery to me, so any guidance on what I'm trying to achieve would be greatly appreciated. I am currently developing a JavaScript API for our company's "widget" so that users can integrate it into the ...

htmlcsscss-float

Chrome Browser Facing Issue with Loading Font Awesome Package

Today I made an interesting observation on my website. Font Awesome was not loading properly on Chrome. Instead of displaying the double down arrow in the gradient circle, it was missing on my laptop's Chrome browser. Interestingly, it appeared correc ...

htmlcssbootstrap-4font-awesome

Position the text so that it is aligned below and to the right of the text box

I'm currently working on a project in ASP.NET that involves a resizable textbox with a character limit display positioned below and to the right of the box. The challenge I am facing is ensuring this text remains properly aligned as the size of the te ...

htmlcssasp.netbootstrap-4

Tips for emphasizing a specific cell in a row based on its expiration date

In my quest to find a script that colors dates within two weeks from today in red and past dates in orange, I have tried various methods without success. I am struggling to implement this feature with my current knowledge. <TABLE> <TR><TD&g ...

javascriptphpjquerycss

Adjust the vertical size of the slider in Jssor

Hi there! I'm currently working on a slider that I want to have a dynamic width (100% of the container) and a static height of 550px on PCs, while being responsive on mobile devices. Below is my code snippet: <div class="col-md-6 right-col" id="sl ...

javascriptjqueryhtmlcssjssor

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

javascriptcssreactjsmaterial-ui

What is the best way to utilize CSS relative positioning for aligning two rows of information on a webpage?

What is the best way to use relative positioning to show two lines of information on an image without the order of information interfering with each other? I want the Files badge to appear at the bottom of the image, with the MusicBrainz and Discogs badge ...

htmlcssbootstrap-4

Change the classes of the body prior to the initial rendering

I know this may seem like a difficult task, and I understand that what I want to achieve might be nearly impossible. My goal is to incorporate a dark/light mode switch on my website. The challenge lies in the fact that the site consists of static files on ...

javascripthtmlcssrepaint

Tips on replacing a React component's styling with emotion CSS

Is there a way to incorporate the background-color:green style to the <Test/> component in the following example without directly modifying the <Test/> component? /** @jsx jsx */ import { css, jsx } from "@emotion/core"; import React from "r ...

cssreactjsemotion

The shade of grey on the curve appears instead of the usual red on the iPad. Any ideas on how to fix

I am having trouble creating a curve like the one shown below on my iPad. The color appears to be gray and does not work properly. Is this a bug with ChartJS or is there a solution to fix this issue? This problem occurs when the type value is set to "lin ...

javascriptcssipadchart.jsvisualization

The justify-position attribute does not have any impact on the positions that are set

Here is the JSX code that resembles HTML but uses ClassName instead of class: <div className="snavbarcontainer"> <div className="toplefticon"> <a class="test" href=" ...

htmlcsssass

The content inside the HTML body doesn't fully encompass the dimensions of the mobile screen

I am working on making my application flexible by using 100vw width and 100vh height for the components. Everything displays perfectly in any resolution on a computer browser, but when viewed on a mobile device, an empty background is drawn below the bod ...

htmlcssfrontend

Tips for avoiding background-image zoom on mobile browsers when stacking elements vertically:

Within my ReactJS application, I have implemented a feature where elements are added vertically from top to bottom when the "Post" button is clicked. https://i.sstatic.net/KwPYV.jpg These elements display correctly on both mobile and desktop browsers. Ho ...

javascriptjqueryhtmlcssreactjs

Unwanted extra border and padding are showing up at the bottom of my HTML

Recently, I decided to experiment with the jquery superslide plugin on a website of mine. To my surprise, there was an unexpected padding at the bottom of the page. My suspicion is that the display area is not being calculated correctly or that a margin is ...

jquerycsshtml

Aligning images within a horizontal layout

I am facing an issue with my horizontal navigation list, where I am trying to place images/icons above the text in each list item. Despite all the images being the same size, I am struggling to center them properly within the list items. Here is the HTML ...

htmlcsshtml-listsimage

Achieving vertical alignment and stretching of subchild within a flexbox element

I am in the process of creating a mobile navigation menu using Flexbox. It will be a vertical menu that occupies 100% of the available height, with the navigation items evenly spaced and taking up the entire height. The structure I am using is ul>li> ...

htmlcssflexbox

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

htmlcssresponsive-designscrollcss-position

Tips for styling cells in a certain column of an ng-repeat table

I am currently facing an issue with a table I have created where the last column is overflowing off the page. Despite being just one line of text, it extends beyond the right edge of the page without being visible or scrollable. The table is built using th ...

javascripthtmlcssangularjssemantic-ui