I'm having trouble getting my blockquote to work properly. Despite linking the bootstrap CSS and JS files, it still doesn't seem to be functioning

I have connected the downloaded css and js files from bootstrap, but the features are not working as expected. The <blockquote> tag is displaying only plain text, and the <cite></cite> element is not showing "-". What could be the reason behind this issue?

<head>
  <title>Bootstrap Cheat Sheet</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

<body>
  <!-- Block Quotes -->

  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    <footer>Quote By <cite title="John Doe">John Doe</cite></footer>
  </blockquote>

javascriptcssbootstrap-4

Answer №1

Assuming that the bootstrap.css file has been loaded correctly (verify in the developer tools console)... and as long as your custom.css is not taking precedence over the blockquote class...

Below is a snippet that should do the job:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">

  <blockquote class="blockquote">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer class="blockquote-footer">From WWF's website</footer>
  </blockquote>

  <blockquote class="blockquote">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    <footer>Quote By <cite title="John Doe">John Doe</cite></footer>
  </blockquote>
</div>

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 Redux store is duplicating the state across different reducers, causing it to appear twice

Having Trouble Viewing Different States for Two Reducers in Redux DevTools In my React project, I am attempting to incorporate a second reducer using Redux to gain a better understanding of the overall state. However, when I inspect the state in Redux Dev ...

javascriptreactjsreduxstate

Searching for specific tags using PHP and JavaScript in MySQL: effective strategies to find what you're looking

What is the most efficient way to search for an item based on user-defined tags? Consider the following data: item | param ----------------- 1 | a 1 | b 1 | c 2 | b 2 | c 2 | d 3 | c 3 | d 3 ...

javascriptphpmysqlarraysajax

Customizing Bootstrap modal backdrop with CSS

I'm exploring how to achieve the backdrop effect of the Bootstrap modal without actually having to load a modal. However, I'm struggling to make it work correctly. Can anyone provide insight into the CSS that the Bootstrap backdrop utilizes inter ...

cssbootstrap-modal

VUE- the GetElementByClassName function is malfunctioning

I attempted to utilize 'getelementbyclassname' within VUE methods. My reason for doing so is that instead of applying information using :style, I would like to adjust the width of the div where I applied my class named 'classon'. I ...

javascriptvue.jsdata-visualization

Why isn't CSS styling and positioning being applied when using constructor in ng-repeat with AngularJS?

For a while now, I've been using ng-repeat to create tables. However, I have come across an issue that I've never encountered before. ng-repeat="users in [].constructor(10) track by $index" Essentially, all the elements generated by ng-repeat a ...

cssangularjstwitter-bootstrapflexbox

Ways to retrieve every element inside a specific div container

Is there a way to select all elements inside a div except for specific ones? For example, consider the following structure: <div id="abc"> <div class="def"> sagar patil</div> <div class="pqr"> patil</div& ...

javascriptjquery

What is the best method for retrieving an item from localstorage?

Seeking advice on how to retrieve an item from local storage in next.js without causing a page rerender. Here is the code snippet I am currently using: import { ThemeProvider } from "@material-ui/core"; import { FC, useEffect, useState } from "react"; i ...

javascriptreactjstypescriptlocal-storagenext.js

Unable to position divs next to each other in Firefox, yet successfully achieved in Chrome

I have successfully placed two divs side by side using the following markup, as shown in image 1, but this layout only works on Chrome. However, Firefox renders it differently as seen in Image 2. Is this a known issue that I overlooked? How can I resolve t ...

javascripthtmlcss

Prevent zooming or controlling the lens in UIWebview while still allowing user selection

Is there a way to disable the zoom/lens on uiwebview without affecting user selection? I'm trying to avoid using "-webkit-user-select:none" in my css. -webkit-user-select:none ...

javascriptioscssuiwebview

Extracting and retrieving information from a complex data structure obtained through an API call

Struggling with this one. Can't seem to locate a similar situation after searching extensively... My goal is to determine the author of each collection associated with a user. I wrote a function to fetch data from an API for a specific user, in this ...

javascriptarraysreactjsobjectnext.js

Modify just one of the padding axis while keeping the other constant by utilizing a media query

My div currently has the following padding set: padding: 14px 150px; I want to change the left/right padding without affecting the top/bottom padding using a media query. @media screen and (max-width: 700px){ #paddingDiv{ padding: same as ...

css

What is the proper way to modify the state prior to displaying the component?

My app allows users to add "persons" to a digital "phonebook" and update their contact information if needed. However, I'm facing an issue when attempting to update a person's phone number after they have been deleted (for example, deleting a con ...

javascriptreactjsaxiosreact-hookssetstate

Combining column values with AngularJS

What is the best way to merge column values in AngularJS? ...

javascriptangularjs

overlaying an image with a CSS box and then dynamically removing it using JavaScript

I am new to JavaScript, so please bear with me if this question seems quite simple. I am facing an issue with my current task. There is an image on a web page. My goal is to place a black box on top of the image (using CSS) to cover it up. Then, with th ...

javascriptjqueryhtmlcss

Is it possible to leverage the className attribute in Material UI components?

Currently using React alongside Material-UI(MUI) for the frontend development. Encountering an issue with the Button Component in MUI, specifically the className prop. Struggling to apply custom styles using classes defined in the style.css file. Conside ...

cssreactjsmaterial-ui

Conceal an entire div using CSS, especially if a portion of it remains unoccupied

Is there a way to conceal an entire division if a part of it is void? For instance, if "dd" is empty as indicated below, can I hide the entire class "test" so that the keyword Restrictions does not display either? I attempted .test dd:empty { display: none ...

csshide

The post request body fails to be recognized, resulting in undefined values being saved to MongoDB

I'm currently facing an issue with my MERN stack app. My express server is functioning well and returns results with Postman. However, I'm encountering difficulties with the post request in the front-end using axios. While I can successfully run ...

javascriptnode.jsreactjsmongodbexpress

What is the best way to retrieve a ReactElement from the DOM?

Imagine I have a ReactElement displayed on the screen: <div id="container" data-reactid='reactid.2'></div> To access the HTMLElement, you can use the following code: var element = document.getElementById('container'); ele ...

javascriptreactjs

Angular9: construction involves an additional compilation process

After updating my Angular8 project to Angular9, I noticed a new step in the build process which involves compiling to esm. This additional step has added approximately 1 minute to my build time. A snippet of what this step looks like: Compiling @angular/ ...

javascriptangularangular9angularbuild

jquery is failing to recognize the HTML generated by ajax

Upon successful login, the website displays a button with the HTML code below: <button class="logout-button">Logout</button> The button is also hardcoded into the website's HTML for consistency. However, after refreshing the page, the AJ ...

javascriptjqueryhtmlajax