Issues with the background color of the bootstrap 'card' when implementing a QR code

How can I customize the background color for a Bootstrap card, specifically filling the entire card including the card text section?

    <div class="content">
  <div class="card">
    <img src="images/qr-code.png" class="card-img" alt="qr-code">
    <div class="card-text">
      <h3>Improve your front-end skills by building new projects</h3>
      <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>

 .card {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 490px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 15px;
    text-align: center;
    }
    
    .content{
      width: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 3rem auto 2rem;
      padding: 1rem 1rem 1.5rem;
      background-color: hsl(0, 0%, 100%);
      border-radius: 20px;
    }
htmlcssbootstrap-5

Answer №1

Give this a try and update your color scheme

 .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        width: 300px;
        height: 490px;
        background-color: blue; /* feel free to adjust the color */
        border-radius: 15px;
        text-align: center;
        }
        
        .inner-content{
          width: 350px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 3rem auto 2rem;
          padding: 1rem 1rem 1.5rem;
          background-color: orange; /* feel free to adjust the color */
          border-radius: 20px;
        }
<html>

        <body>
        <div class="inner-content">
          <div class="container">
           <!-- insert your image here -->
            <img src="https://via.placeholder.com/180" class="card-img" alt="qr-code">
              <div class="card-text">
                <h3>Enhance your coding skills by crafting new projects</h3>
                  <p>Some quick example text to enhance the card title and compose the majority of the card's content.</p>
                </div>
          </div>
        </body>

        </html>

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

Looking to crop a canvas without changing its dimensions using jQuery

I'm currently working on a project that involves overlaying two images; one uploaded by the user and the other a default image. However, I am facing an issue when the uploaded image is a rectangle instead of a square, causing the canvas to resize it. ...

javascripthtmljquerycanvasoverlay

I'm encountering a Parse error: syntax error, wherein the file unexpectedly reaches its end

I'm currently in the process of creating a personalized search engine that enables users to search using multiple fields. However, an error message stating "syntax error, unexpected end of file" keeps popping up, specifically on line 201 of my code, r ...

phphtmlsyntax

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...

javascriptjquerycssgoogle-code-prettify

Submit the form without displaying any output in the browser, not even in the view source code

I have a basic form that needs to be submitted multiple times, but I want the submission process to be hidden from the browser. Simply using "hidden" or "display:none" won't completely hide the form code when viewing the page source. I tried using PHP ...

javascriptphpjqueryhtml

Troubleshooting Browser Behavior: Back Button Not Loading Page - jQuery and HTML5

I've built a dynamic slideshow using jQuery to change images with seamless transitions. To enhance user experience, I'm also updating the page title and URL without triggering a page reload. The code snippet below illustrates how I achieve this: ...

javascriptjqueryhtmlbrowser-history

CSS3 Perspective Issue: Solutions for Fixing

I'm currently working on creating a card flip animation that flips in the X axis direction. Right now, the div rotates using the rotateX() method. I attempted to add the perspective property to the upper div, but it ended up distorting my div structur ...

javascripthtmlangularjscss

Various JSON Tag values occurring more than once

Upon receiving a JSON Object in HTML, I am passing it to a JavaScript function defined below. The issue arises when the same folderName appears repeatedly on the HTML page. JSON Object: { "folderName": "arjunram-test", "objects": [ { ...

javascripthtmljson

Adding AngularJS modules to an HTML file

Recently, I've been diving into the world of AngularJS, but I'm facing a roadblock - my HTML doesn't recognize the angular module I created. It's odd because the bindings work perfectly without involving the module... This is my HTML: ...

javascripthtmlangularjs

Adjusting the width of a nested iframe within two div containers

I am trying to dynamically change the width of a structure using JavaScript. Here is the current setup: <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px"> <div style="width:800px;"> <iframe id="notReliable_C ...

javascriptjqueryhtmliframewidth

Unexpected white space appears at the bottom of the page when rotating the device in iOS Safari

One issue I encountered on my website involves a meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> This, combined with height:100%; on the html and body tags, causes problems when viewed on Safari ...

htmlcssiossafari

Spin the connections around a circular path

I'm interested in creating a website where links rotate around a circle, similar to this example: https://i.sstatic.net/103mx.jpg. The links will display different images and texts leading to various URLs. I want the images to form a unified rotation ...

javascriptjqueryhtmlcssrotation

Is there a way to make jQuery Validate display errors within the form elements rather than outside of them?

Given the jQuery Validate basic example provided in the link below, what method can be used to display error messages within form elements whenever feasible (excluding checkboxes)? http://docs.jquery.com/Plugins/validation#source ...

jquerycssjquery-validate

Tips for making a slide-in animation that doesn't require adjusting the browser size

As I work on an animation where an img object and text slide in from outside the frame of the webpage upon page load, everything seems to be running smoothly. But there's one glaring issue: right at the start of the page load, the webpage resizes for ...

javascripthtmlcssreactjscss-animations

Using jQuery to dynamically change the CSS color based on the background-color of a checkbox label

When a checkbox is selected, the function below runs to change the text color to white or black based on the darkness of the background color. However, the third checkbox should trigger this change to white but currently does not. function isDark(color) { ...

jquerycss

Eliminate the empty choice for Angular when dealing with dynamic option objects

Looking for assistance with this code snippet: <select ng-model='item.data.choice' > <option ng-if='item.data.simple_allow_blank == false' ng-show='choice.name' ng-repeat='choice in item.data.simple_choices&ap ...

cssangularjshtml

Achieving 10 touchdowns within a set of 5 plays during a football game

Receiving a page from an external site where I have no control. The table structure is as follows: <table><tbody> <!-- headers --> <tr><td></td> <td></td> <td></td> <td>< ...

javascriptjqueryhtml

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

javascriptjqueryhtmlcssslideshow

How to access a separate database's Javascript library in XPages resources

Is there a way to import the javascript library from another database (content.nsf) into my current xpages database resources? I am trying to load the common.js file using the code below but it's not working. Can someone please help me correct it? &l ...

htmlxpages

A layout featuring two columns: the right column has a fixed width, while the left column is fluid

I am in need of a simple solution: 2 columns with the right column having a fixed size. Despite searching on stackoverflow and Google, I have not been able to find a working answer that fits my specific context. The current approach is as follows: div.con ...

csshtml

Ways to style text using variables in SASS without using quotation marks

When working in SASS, I have created the following mixin: @mixin background_gradient($dir, $from, $to) { background: linear-gradient('to #{$dir}', $from, $to); // for IE10 } However, when viewing it in the browser, the output appears as: b ...

htmlcsssass