The styling of Bootstrap CSS is not displaying correctly within the body of the webpage

I'm facing an issue where the content in the body of my page is not rendering correctly due to a problem with my bootstrap css. Specifically, the paragraph tag seems to be rendering inside the image tag even though both are within the body.

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Paul Drake's Website</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap-grid.css">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/site.css">
</head>
<body>
<header>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <a href="files/Resume 2020.pdf">Resume</a>
            </div>
            <div class="col-6 text-center">
                <h1>Paul Drake's Website</h1>
            </div>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="False">My Projects</button>
                <div class="dropdown-menu col-3" aria-labelledby="dropDownMenuButton">
                    <a class="dropdown-item" asp-controller="Movie" asp-action="GetMovies">Streaming Movie App</a>
                </div>
            </div>
        </div>
    </div>
</header>
<main>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <IMG src="files/_DSC0630-Costco3.jpg">
            </div>
            <div class="col-md-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida cum sociis natoque penatibus. Leo vel fringilla est ullamcorper eget nulla facilisi etiam dignissim. Diam sit amet nisl suscipit adipiscing bibendum. Diam sollicitudin tempor id eu nisl. Lacus vel facilisis volutpat est velit egestas. Purus gravida quis blandit turpis cursus in hac habitasse platea. Non enim praesent elementum facilisis leo vel. Nunc scelerisque viverra mauris in aliquam sem fringilla ut. Tristique sollicitudin nibh sit amet commodo. Porta nibh venenatis cras sa...</p>
            </div>
        </div>
    </div>
</main>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</body>
</html>

Answer №1

While investigating the issue on codepen.io, I noticed that a crucial cdn link is missing from your head section. To resolve this, please include the following code:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

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

When Google Chrome encounters two variables or functions with the same name, how does it respond?

I am curious what happens when Google Chrome encounters two variables with the same name. In my particular case, this issue arises in the code snippet available at this link, which is a small portion of the entire code. I am facing an issue where placing C ...

Excess space noted at the bottom of tablet and mobile versions of the page

I'm struggling to troubleshoot an issue with the mobile and tablet versions of a web-shop I'm designing for university. Some pages have excessive space after the HTML tag, but only on certain pages. I've tried commenting out CSS lines relate ...

What is the process for inserting a scroll bar within a div element?

   I have recently created a webpage using some divs, along with a bit of CSS and JavaScript. I am struggling to figure out how to add a scrollbar to one of my divs. The code is not overly complex, as it includes both CSS and JavaScript. <html> & ...

The full screen menu is exclusively displayed in the navigation bar

My HTML and CSS code is causing an issue where the full-screen menu only appears in the nav bar. This problem seems to be specific to Safari. To solve the issue, I need to remove the following code: .nav { position: fixed; } However, I still ...

Adjusting the z-index of the tinyMCE toolbar

I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly. However, there are times when there are videos placed above the content. In such ...

Flashing background colors on a website

Can anyone explain why this code won't alternate the background color of my website between two different colors? <script type="text/javascript"> function blinkit() { intrvl = 0; for (nTimes = 0; nTimes < 3; nTimes++) { intrv ...

Use Vue.js class bindings to create blank spaces in between CSS classes

I'm utilizing a v-bind:class binding on a component in order to toggle a css class based on the truthiness of a boolean within my Vue.js component. When I specify this in my template: <aside v-bind:class="{'--opened': sidebarVisible}" ...

Modify the background color of the disabled checkbox in Vuetify

Check out this example where I found a disabled checkbox. Is there a way to set a custom background color for the "on" and "off" states of a disabled checkbox? ...

The mobile menu is not responding to the click event

Upon clicking the mobile menu hamburger button, I am experiencing a lack of response. I expected the hamburger menu to transition and display the mobile menu, but it seems that neither action is being triggered. Even though I can confirm that my javascrip ...

Retrieving the chosen date from a calendar using a jQuery function

Hey there, I need help with showing tasks created on a specific date by selecting that date from a full month calendar. https://i.sstatic.net/hbLtp.jpg There are multiple tasks created on the selected date, and I want to trigger a jQuery event to fetch d ...

TimePicker Component for ASP.Net MVC with Razor Syntax

I'm currently working on implementing a TimePicker using Razor and JQueryUI in my bootstrap website. While I have successfully created a DatePicker, I am facing difficulties in creating a separate TimePicker using two different TextBoxes instead of se ...

Make sure to specify the max width of the Bootstrap container class to 940 pixels

Currently, I am utilizing Bootstrap 4 with the default container width on my desktop screen. For the main content section of my application, I would like it to be contained within a maximum width of 940px on larger screens. Should I override the existing ...

Adjust the transparency of a distant div element by using CSS checkboxes without any JavaScript

I'm faced with the challenge of manipulating the opacity or animating an array of items that are all contained within a single div. In addition to altering the opacity of each individual item, I also want to change the opacity of the entire div and it ...

Issue with highlighting when one string overlaps with another

I am facing a challenge with handling a string that contains Lorem Ipsum text. I have JSON data that specifies the start and end offsets of certain sections within the text that I need to highlight. The approach I am currently using involves sorting the JS ...

The fine balance between a horizontal <img> and a <div> element

Can't seem to get rid of the thin white line between a black image and a div with a black background on a page where the body background is set to white. I've tried setting border: 0 !important among other things, but it just won't go away. ...

The outcome of utilizing an AjaxForm is a response from the AjaxForm

This is My Perspective: @foreach(var item in Model) { <tr id="TR@(item.Id)"> @{Html.RenderPartial("_PhoneRow", item);} </tr> } _PhoneRow: @model PhoneModel @using(Ajax.BeginForm("EditPhone", new { id = Model.Id }, new AjaxOptions { Upd ...

The webpage contains duplicate ID attribute value "x" that has been identified

In my Angular 7 project, three components (a, b, c) all use an input element with the same id of "x". However, component b has 4 input elements all using the id "x" as well. This poses Accessibility Issues as ids must be unique. The test cases utilize &apo ...

Is there a way to load an image asynchronously when the page loads and show a loading gif during the loading process?

My image tag displays a dynamically generated graph from the database. The loading time can vary significantly, sometimes only taking a second while other times it may take up to 6 or 7 seconds for the graph image to appear. I am looking for a way to sho ...

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

Tips for positioning the search form in the navbar header

My brand image and list with 2 glyph-icons & a search form in the navbar header are not aligning properly. The search form button keeps dropping to the line below. Does anyone know a CSS trick to keep it on the same line as the rest of the links? All the ...