I'm using Bootstrap (version 5.3) and when I tried to replicate the features from the examples, I noticed that the background isn't being copied over

I encountered an issue today while working on a website using bootstrap. I was copying features from examples in the bootstrap section, but when I pasted the code into my coding platform, the background appeared transparent and did not display as expected.

I anticipated that the code would include a background to ensure the features were not transparent.

Here is the code I used:

<div class="container px-4 py-5" id="featured-3">
      <h2 class="pb-2 border-bottom">Why Choose Us?</h2>
      <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
        <div class="feature col">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
            <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"></use></svg>
          </div>
          <h3 class="fs-2 text-body-emphasis">Easy to Use</h3>
          <p>So easy to use, that even your dog could do it.</p>

        </div>
        <div class="feature col">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
            <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"></use></svg>
          </div>
          <h3 class="fs-2 text-body-emphasis">Elite Clientele</h3>
          <p>We have all the dogs, the greatest dogs.</p>

        </div>
        <div class="feature col">
          <div class="feature-icon d-inline-flex align-items-center justify-content-center text-bg-primary bg-gradient fs-2 mb-3">
            <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"></use></svg>
          </div>
          <h3 class="fs-2 text-body-emphasis">Guaranteed to work</h3>
          <p>Find the love of your dog's life or your money back. </p>

        </div>
      </div>
    </div>
htmlcssbootstrap-5

Answer №1

It appears that some of the examples you're using may have been copied from Bootstrap's official documentation without properly defining background colors. This can result in default colors like white or grey being displayed. I recommend checking out this documentation on background colors in Bootstrap to learn how to add them effectively.

Welcome to StackOverflow! In the future, remember to provide more details and explanations when asking questions.

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 issue with Bootstrap Vue scrollspy arises when trying to apply it to dynamic data. Upon closer inspection, it becomes evident that the elements are activating and highlighting one by

In my application built with Vue, content is displayed based on the component type (Header, Text, Image) in a JSON file. I am looking to implement scroll spy functionality specifically for the Header component containing headings. I have attempted to use ...

cssvue.jsvue-componentbootstrap-vuescrollspy

Adjust SVG size as per parent container in AngularJS custom directive

I have a unique situation where I am integrating an angular directive into a dynamically-sized element. The directive itself is made up of an SVG which adjusts based on the size of the container. I am working on making sure the SVG automatically resizes an ...

javascriptcssangularjssvgcross-browser

Pictures failing to load on both Chrome and Safari browsers

For some reason, the images on my app are not appearing in Chrome and Safari but show up fine in Firefox. If you try to open the image URL in a browser, it works perfectly. However, when embedded in the HTML document, the image appears broken. I also test ...

jqueryhtmlfirefoxgoogle-chromejquery-templates

Tips for increasing the complexity of your bottom-line animation

Hello everyone, I am currently learning the basics of CSS and have a question about a specific animation effect. Please bear with me if this type of inquiry is not suitable for StackOverflow. In my index.html file, I have the following code: <n ...

htmlcss

How to Create a DataTable Responsive Feature Where All Columns Collapse on Click, Except the Last One?

I am currently utilizing the DataTables library to generate a responsive table. I am aiming to create a feature where all columns in the DataTable can toggle between collapse and expand states when clicked, with the exception of the last column. Below is a ...

javascripthtmlcssdatatableresponsive

Incorporate a course within the conditional statement

Currently, I'm working on the development of an input site and one of my goals is to highlight empty fields. My plan is to check if a field is empty using an if statement and then apply a specific class that will serve this purpose. This is the JavaS ...

javascriptjqueryhtmlcss

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

Python Selenium: How to locate elements using xpath in the presence of duplicate elements within the HTML code

Currently, I am utilizing selenium to extract data from a liquor sales website to streamline the process of adding product information to a spreadsheet. My workflow involves logging into the website using selenium and searching for the specific product. Wh ...

pythonhtmlseleniumxpath

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

cssreactjsreact-bootstrap

Error encountered when using the $.post function

$(".eventer button[name=unique]").click(function() { console.log('button clicked'); thisBtn = $(this); parent = $(this).parent(); num = parent.data('num'); id = parent.data('id'); if(typeof num ! ...

jqueryhtmlajax

Incorporating Bootstrap's Inline Design Elements

I am having trouble aligning a series of elements horizontally using bootstrap as shown in the example image below: Whenever I add the "form-control" class to the input element, it gets pushed down below the other elements. I have experimented with differ ...

htmltwitter-bootstrapcsstwitter-bootstrap-3

Executing a script for every row in a table using Python and Selenium

As a newcomer to Python and Selenium, I have been struggling with a specific task for days now. Despite my efforts to search and experiment, I find myself completely stuck. My goal is to access sales records within a table that contains information about ...

pythonhtmlseleniumhtml-table

Error: Attempting to assign a value to 'onclick' property of null object [Chrome Extension]

window.onload = function() { document.getElementById('item_save').onclick = function() { var item_name = document.getElementById('item_name').value; var item_size = document.getElementById('item_size').value; v ...

javascripthtmlgoogle-chrome-extension

How to dynamically change the position of an input field within a form using JavaScript and jQuery

I have a form displayed on my website that looks like this: input a input b input c I am wondering if it is achievable to rearrange the order of inputs using jQuery, like so: input a input c input b However, it is important that the data is still ...

javascriptjqueryhtmlforms

Tips for locating the index of the previously selected active class

I am currently working on a slider and have made progress up to this point. However, I am facing an issue where I cannot proceed because I need to identify the index of the item from which I removed the last active class before the click event occurs. My ...

javascriptcsssliderclickstyles

Ways to prompt a specific text value to generate varied responses

Whenever I try to input the letter "h", I expect a specific value in return but for some reason, it's not working as intended. Despite my best efforts to troubleshoot the issue, I have been unsuccessful in finding a solution. It's frustrating bec ...

javascripthtmltextboxrespond-to

Text that fades in and out based on scrolling past a specific point

There's a text containing <p> and <h1>. The text finishes with one <h1>. I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of th ...

javascriptjquerycss

React.js onClick does not display the dropdown

Hello, I have a question regarding my navbar icon functionality. When I click on the icon, it is supposed to open a dropdown menu. However, although the div name changes when clicked, the CSS properties remain the same as the initial class. I am unsure w ...

javascriptcssreactjsdropdown

How can I showcase Bootstrap cards horizontally within a razor foreach iteration?

I seem to be experiencing a mental block on how to arrange bootstrap cards in a horizontal layout using a for each loop. By default, they appear vertically. Below is my razor code: @foreach (var item in Model) { var imgUrl = Url.Content("~/Conte ...

htmlcssasp.net-mvctwitter-bootstrap

The 'in' operator cannot be used in Jquery to search for 'display' in a value that is undefined

This is the HTML code snippet I have: <div class="V_CPp Elss <?php echo $Show; ?>"> <span class="ViewC">View more comments</span> </div> <di ...

jqueryhtml