Tips for changing the appearance of blockquote lines in bootstrap 5

I'm trying to see if it's possible to customize the blockquote-footer line in bootstrap 5. Can I change its color and width?

Here's the code snippet from bootstrap 5:

 <figure>
                      <blockquote className="blockquote">
                        <h1 className="text-start">10 of Wands</h1>
                      </blockquote>
                      <figcaption className="blockquote-footer">
                        Published Date: Oct. 10, 2021
                      </figcaption>
                    </figure>

Example output:

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

How can I adjust the color and size of the --?

I've tried this code, but it's not working:

.blockquote-footer {
      border-left: 5px solid #AB8D60;
      width: 161px;
    }

Thank you!

cssbootstrap-4bootstrap-5typographyblockquote

Answer №1

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9fdcd1d1cad5c2cfc6cfc2c9dec9cdcedc8c9dcb0af9fc8c2dfcac6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&

<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="795b5656605f52575557575f18475451">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3c0c5c5dee1d6dbdcdfdcf7c6d9c6c7d6dbddcfc9cadfcec2cf80dcc0cc">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ecdd0d0dbe4e3ded7ded9d0f7d0d4d7c5d3d0cad485d9c3decbf4ccc0cc">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->



<figure>
<blockquote className="blockquote">
  <h1 className="text-start">10 of Wands</h1>
</blockquote>
<figcaption className="blockquote-footer">
  <span style="Font-size:20px; color:red" >--</span>Published Date: Oct. 10.   2021
  </figcaption>
 </figure>

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

Apply a dual-color gradient background vertically

I am trying to figure out how to achieve a two-tone background color in an HTML document. I know this question has been asked before, but I specifically want the colors to be split vertically rather than horizontally. ...

cssbackground-color

What is the best way to adjust the CSS height of an HTML select element to 100% within a table cell in Internet Explorer

Is it possible to make a select (dropdown list) element fill out 100% of the table cell height? I was successful in getting it to work in Firefox and Chrome, but unfortunately not in IE (Internet Explorer). Here is the test HTML code: <table> & ...

htmlcssinternet-explorer

Dynamic horizontal scrolling

I need help implementing a site using React that scrolls horizontally. I'm unsure how to implement certain aspects, so I am looking for some assistance. Within a wrapper, I have multiple container Divs. <div class="wrapper"> <div class=" ...

javascripthtmlcss

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

What is the reason behind my button appearing beneath my links in React?

https://i.sstatic.net/Qmm4z.jpg Here is an image showcasing the current header render. The header consists of a HeaderMenu and 3 Links. While the links are functioning properly, the HeaderMenu is causing the links to be positioned below it. The HeaderMenu ...

javascripthtmlcssreactjsmaterial-ui

Switch back and forth between two tabs positioned vertically on a webpage without affecting any other elements of the page

I've been tasked with creating two toggle tabs/buttons in a single column on a website where visitors can switch between them without affecting the page's other elements. The goal is to emulate the style of the Personal and Business tabs found on ...

javascripthtmlcsstabstogglebutton

An HTML button generated by a .js file is able to execute a .js function without any issues, but it inadvertently removes all .css styling

Currently grappling with an issue in my JavaScript self-teaching journey that I can't seem to resolve or find examples for. The problem at hand: When the HTML button calls a .js function, it successfully executes the function but also wipes out all C ...

javascripthtmlcss

D3 Treemap for handling extensive sets of data

I am uncertain if there exists a method to incorporate the desired feature. I am seeking a solution similar to zoomable treemaps, but to initially load a limited number of child levels and then dynamically add more child nodes without requiring a node clic ...

javascriptajaxcssd3.js

Issue with toggleClass functionality (potential coding glitch)

I am attempting to display my div once the button is clicked. Below is the code snippet: <div class="post-menu"> <button class="button"> <i class="uil uil-ellipsis-h"></i> </button> ...

htmljquerycss

"Exploring the variations in design between wordpress.com and self-hosted wordpress

I'm currently puzzling over the source of the disparities in style between my Wordpress site hosted elsewhere and my identical theme on Wordpress.com. It's perplexing to see such contrasting appearances while I migrate my blog. After some irrele ...

csswordpressstyleswordpress.com

Arrange elements within a div using Bootstrap

I have been struggling to align items within a div tag and despite trying various methods, I have not been successful. . Here is the current structure of my code: https://i.stack.imgur.com/t9PAj.png I attempted to use flexbox, but encountered an issue ...

htmlcssbootstrap-4

What is needed to enable the functionality of the next and previous buttons? (Carousel Bootstrap)

I'm working on a text-only carousel using Bootstrap, but I'm facing an issue with the slider not functioning properly when I press the "next" and "prev" buttons. Any assistance would be greatly appreciated! <link rel="stylesheet" href="htt ...

htmlcsstwitter-bootstrapcarouselbootstrap-5

Trouble encountered with card flip style login form in Vue.js, as the card is not maintaining its position properly during transition animations

Need help styling a login/signup component in Vue.js where flipping between the two cards isn't working smoothly. The transition is causing one card to move down and right while the other comes in from the bottom right. It's hard to explain the i ...

javascripthtmlcssvue-componentvuejs3

What is preventing my content from showing up when clicked like this?

I have created a javascript script to reveal hidden content, but for some reason it is not working when I click on it. Can anyone provide assistance? Below is the script I am using: <script src="style/jquery/jquery.js"></script> <script> ...

javascriptjqueryhtmlcss

Prevent the use of repetitive borders by utilizing display: inline-block

I've been experimenting with the behavior of div elements when used as a table, rather than using the traditional table element or display properties. The main reason for this is that I have found tables and display properties to be problematic for my ...

htmlcssflexboxcss-tables

Having trouble with image hover functionality on pure CSS?

<div id="headermenu"> <ul > <li id="menu1"><a href="#"><img src="images/menu1.png"/></a></li> <li id="menu2"><a href="#"><img src="images/menu2.png"/></a> < ...

htmlcss

Why Safari is Not Displaying Drop Shadows on SVG Path Elements in CSS

I implemented an SVG triangle using HTML: path { fill: red; filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1)); } <svg style="height: 36px; width: 100%; background-color: #EAEAEA ;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline ...

htmlcsssvgsafari

Tips for aligning an HTML button with a hyperlink

<form method="get" action=https://www.wwf.de/spenden-helfen/allgemeine-spende> <button type="submit">Donate Now</button> I am facing an issue where the button is appearing randomly on my website, but I need it to ...

htmlcssbuttonstylespositioning

Creating line breaks for ToolTip titles in Material-UI can be achieved by using the appropriate syntax and

I am currently working with the ToolTip component and I have a query regarding displaying two lines for the title text - one line for each language rather than having them displayed on a single line. Is it possible to achieve this and how can I style the c ...

javascripthtmlcssreactjsmaterial-ui

What is the best method to insert multiple rows of the same height into a table cell in

My datatable is causing me trouble as I try to add more rows in the td after the Name column. The rows are not aligning properly, and I need a solution. I want these new rows to be aligned with each other, but the number of rows may vary based on user inp ...

htmlcsshtml-tabledatatable