Troubleshooting problem with Bootstrap media object in CSS

I am attempting to utilize Bootstrap to showcase media content (linked here: https://getbootstrap.com/docs/4.0/layout/media-object/). However, despite copying and pasting the code from the documentation, the output does not match the example on the website. Additionally, the external CSS file bootstrap_part.css appears to be empty.

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap_part.css">
    <link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.0.0-beta/iso_bootstrap4.0.0min.css">
    <title>Harli Lacej - Website</title>
    <link rel="icon" href="../personal-website/img/H.png" type="image/png">
</head>
<body>
    <main>
        <img src="./img/profile_photo.png" alt="profile_photo" height="150px" width="150px">
        <br>
        <br>
        <div class="bootstrap">
           <div class="media">
        <img class="mr-3" src="img/img_asd.jpg" alt="Generic placeholder image" width="60">
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </div>
        </div>
        </div>

...

Answer №1

The issue has been resolved. The problem was with the code provided on Github. For anyone seeking isolated Bootstrap 4.1.0, you can access it through this link:

<link rel="stylesheet" href="https://toert.github.io/Isolated-Bootstrap/versions/4.1.0/iso_bootstrap4.1.0min.css">

For those following the same instructions, visit this link: https://github.com/toert/Isolated-Bootstrap

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

The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...

Issues with playing Html 5 video arise when making an ajax call

My goal is to implement an AJAX call followed by displaying an HTML5 video. The provided code snippet seems to be ineffective. $.ajax({ type: "POST", url: "Videos.aspx/GetBlocs", contentType: "application/json; charse ...

I'm attempting to showcase an HTML file by using res.sendFile within the Express framework

As part of my workflow implementation, I have set up a scenario where upon user login, the credentials are sent via Ajax to an Express route for verification. If the user exists, the route responds with a message "authorised" triggering a second Ajax call ...

What is the best jQuery library to add to my website?

I have included several jQuery scripts on my website for various functionalities such as sticky header, anchors, and animations. I am wondering if it is necessary to include all of them or if I can just include one or two? Here are the jQuery scripts I ha ...

issues with alignment between bootstrap div and canvas

I am currently working on a project with a canvas inside a div using three.js. My goal is to display a purple bar for user settings on the right side of the three.js window. However, I am encountering an issue where Bootstrap is not recognizing that I want ...

What is the best way to extract the first heading tags from a post and showcase the outcome?

Can someone help me with changing the_title() function to a heading tag that I manually input in posts? I have created a post loop list using table code but I am stuck at this point... Desired Title Format: <h3 style="text-align: center;">Title Here ...

Guide to creating a radio button with the appearance of a toggle button

Is there a way to style radio buttons like toggle buttons using only CSS and HTML? I want the group of radio buttons to have the appearance of toggle buttons, while still maintaining their functionality as radio buttons. UPDATE: I am open to simply makin ...

Error: Validation issues detected in field functionality

My goal is to loop through a set of text fields and check if the user has input any values. However, I'm facing an issue where even though I have provided values in the text fields, it seems like they are empty. To better illustrate my problem, I have ...

Looking to access a variable in Python Flask before it is referenced

I encountered an issue while trying to reference the variable "found_user," an object of the User class; it is defined within an if statement when a user logs in to the home page for the first time. My intention is to utilize the user's id to generate ...

Refresh the database records by clicking the submit button

Is there a way to update a database by entering text into a text box and submitting it, with the data being sent to the database with a specific id? The code snippet below outlines what needs to be done, but it seems to trigger a 403 error: Access forbid ...

DIV collapsing in reverse order from the bottom to the top

Looking for some help on how to create two links that, when clicked, will scroll a hidden <div> up to fill the full height of its parent container. I've been having trouble with the element using the full height of the <BODY> instead. ...

Angularjs input type=number directive is malfunctioning

I have an input field with the type "number" that allows both whole and decimal numbers. However, I only want to allow whole numbers to be entered into the input. I have created a directive that works for input fields with type "text", but it does not work ...

What is the best way to eliminate the pause in my slideshow?

After spending a few hours working on this project, I've almost completed it. However, I'm facing an issue with the slideshow functionality. It seems to pause after cycling through all the images. Any suggestions on why this might be happening? ...

Is it not recommended to trigger the 'focusout' event before the anchor element triggers the 'click' event?

In a unique scenario, I've encountered an issue where an anchor triggers the 'click' event before the input field, causing it to lose focus and fire the 'focusout' event. Specifically, when writing something in the input field and ...

Are you searching for a stylish tabbed navigation menu design?

I am searching for a tabbed navigation menu specifically designed to showcase images as the tab items. Here is an example of what I have in mind: <div class="menu"> <a href="#"> <img src="images/Chrysanth ...

update url to redirect hashbang with history.js

Upon further investigation, I have observed that history.js has the ability to automatically transform http://www.site.com/some/path#/other/path into http://www.site.com/other/path when used with a html5 enabled browser. While this feature is useful, ...

Conceal the standard style class of the p:selectOneRadio element

On my xhtml page, I've implemented p:selectOneRadio. However, I'm struggling to remove the default style class .ui-helper-hidden-accessible, resulting in the radio button icons not being visible. Here's a snippet of my code: <p:selectOne ...

reason behind text styling: thick 12 pixels height with line spacing of 25 pixels using "Arial" font

Question about CSS Size: Understanding font sizes in CSS {font: 14px/24px Arial, Helvetica, sans-serif} I've noticed some CSS code like this on the website .selector {font: bold 12px/25px "Arial";} I know that 'bold' refers to font w ...

Excess space at the bottom of the Heatmap chart in Highcharts

I am facing an issue with a heatmap having extra space at the bottom that I cannot seem to remove. Despite trying various solutions from different Stack Overflow threads, such as adjusting chart.marginBottom, chart.spacingBottom, x and yAxis margins, and d ...

Issue with Braintree drop-in form: Nonce string generation problem

I've encountered a peculiar issue while trying to utilize the dropin form from Braintree. Successfully integrating the form into a view, here's how it looks: <form id="createTransactionForm" method="post" action="#&qu ...