Problem with Bootstrap not supporting the bgcolor attribute

Hey there, I'm a newcomer to bootstrap and am encountering an issue. Here is the code I'm working with:

<!DOCTYPE html>

<head>
  <title>Bootstrap Progress Bar</title>
<meta charset="utf-8">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>

<body bgcolor="red">

<p>Progress Bar</p>
<div class="container">
<div class="progress bg-danger">
  <div class="progress-bar bg-success text-center" style="width:77%;">11
</div>

</div>
</div>
</body>
</html>

I am attempting to change the background color using:

<body bgcolor="red"> 

However, for some reason this code isn't working and only inline CSS is functioning:

style="background-color:red;"

Does anyone have a solution?

Answer №1

Found some useful information at https://getbootstrap.com/docs/4.3/getting-started/introduction/

According to Bootstrap, the HTML5 doctype is necessary.

Also came across this link: https://www.w3schools.com/tags/att_body_bgcolor.asp

The bgcolor attribute is no longer supported in HTML5. CSS should be used instead.

In essence, if you're working with bootstrap, it's essential to define background colors using CSS due to the use of the HTML5 doctype (which doesn't support the body tag's bgcolor attribute).

Hoping this explanation sheds some light on your current situation.

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

Variable width items inside an overflow-x container

I'm searching for a solution to create a vertical navigation list that can accommodate elements wider than the container itself. Since users have the freedom to input any names for the items, I cannot predict their width, except maybe by setting a ver ...

Flawlessly Outputting PHP and HTML

When querying a result from a table, I face an issue where the text does not automatically wrap to a new line if it's too long. This results in the text being displayed on a single line and often extending off the page. How can I ensure that the text ...

Tips for aligning images within Bootstrap columns and using auto zoom to properly fill the space

Here is the code snippet for displaying images: <div class="row"> <div class="col-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div class=&qu ...

Show on smartphones, conceal on desktops - Activation/URL

I'm attempting to create a click-to-call link on my website using the following: <a class="mobile-only" href="tel:+534306464456"><p class="">Click Here to call us</p></a> I want this link to only show up on mobile devices, sp ...

CSS: Positioning footer at the bottom of ASP webpages (not fixed to the bottom of the screen)

After researching various methods for positioning footers in webpages using CSS, I have come across several solutions, including some on Stack Overflow. However, it seems that most of these approaches do not work with ASP pages. Therefore, my question is: ...

Creating a visualization tool for Pareto analysis with Javascript, Html, and JSON

Currently, I am on the lookout for plugins, examples, or any related resources that can assist in creating a Pareto Chart for an HTML page. My goal is to construct it using HTML, style it with CSS, and populate data through JSON. While I am open to buildin ...

Is it possible to use ajax to display the combination of multiple strings?

In my code, I have a span containing some text. By default, the <span class="switcher__result"> has a CSS property of display: none. However, when my <button class="switcher switcher__Last collapsible"> changes the text, the result span switche ...

What is the best way to apply CSS to a specific row in AngularJS?

I am currently developing a to-do list using AngularJS. It's almost completed but I have a question regarding highlighting the entire row when in editing mode by adding a CSS class "yellow". Unfortunately, I'm unsure how to achieve this. Additio ...

Having trouble getting the custom font to display correctly in xhtml2pdf for a Django project

I'm having trouble incorporating a custom font into my PDF generated from HTML. Although I successfully displayed the font in an HTML file, indicating that the font path is correct and it's being used properly, the .ttf font type doesn't re ...

Utilizing ReactRouter via CDN without needing npm

As someone new to React, I have been practicing by directly incorporating the react.js and react-dom.js files along with browser.min.js for JavaScript transformation into my HTML page. Now, I am looking to utilize react-router and have added the ReactRoute ...

Animating with Jquery swipe motion

I am looking to make my brand image appear animated when the site is opened. I want it to swipe or move linearly from left to right and then return to its original position. I tried searching on Google for a solution but couldn't figure out how to mak ...

Unveiled absolute positioned element disrupts page layout when revealed

I'm facing an issue where an absolutely positioned element is causing content to move when it's displayed. You can see the problem in action by clicking on Profile in this fiddle. Can anyone help me understand what is causing this behavior and h ...

Collapse dropdown menus upon clicking outside of them

As a newcomer to coding, I'm trying to figure out how to create multiple dropdown menus where each one collapses when you click outside of it. I've been struggling with the code I wrote for weeks now - I want to have 3 dropdown menus but only one ...

Achieving a horizontal alignment of these four div elements containing images

I need some assistance with aligning the divs using the .acontainer class. It was working perfectly before adding the images, but now it's all messed up. I've tried various adjustments and searches online, but I'm still stuck. Thank you for ...

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

Implementation of Ionic Tabs with Hidden Back Button

Is there a way to hide the back button for a specific tab in my ionic app without affecting the rest of the page? I tried adding "hide-back-button="true" to the tab code, but it didn't work as expected. I want to achieve something like this: <ion ...

The valueChanges event of a Reactive Form is activated whenever options from a datalist are selected

Whenever a user types into the input field, I am making an API call to retrieve and display data in a datalist for autocompletion (typeahead). control.get('city').valueChanges.pipe( map((searchText) => searchText.trim().toLowerCase()), fi ...

A structured design approach combining fixed and fluid elements tailored for the 960.gs framework

Our website is designed using the 960.gs grid system, and I am attempting to customize it into a 3-column layout with Fixed(100px) - Fluid(max width) - Fixed(100px) view. However, most online generators for 960.gs grids only offer fully fixed or fully flui ...

Designing websites or applications for mobile devices requires careful consideration of how content will

Currently, I am trying to use media queries to cater to mobile screens. The main problem I am encountering involves the text on the header when switching between Portrait and Landscape modes. In the landscape view, the top property overrides the portrait ...

JavaScript generating HTML code causing malfunctions

I have been attempting to implement the IN Place Editing feature using JQuery. Below is the code snippet editinplace.js $(document).ready(function() { //When div.edit me is clicked, run this function $("div.editme").click(function() { // ...