No matter how much effort I put in, combining CSS with Bootstrap seems to be an impossible task

I have been working on my website using Bootstrap libraries and I am trying to customize certain aspects of the parent layout such as the background color and jumbotron color. However, no matter what I try, I cannot seem to make it work.
Can anyone help me with applying CSS in conjunction with Bootstrap?

.jumbotron 
    {
        background-color: blue !important; 
    }

    #body
    {
        background-color: grey;
    }


<body>
  <div class="body">
    <div class="jumbotron">
      <div class="container text-center">
        <p>"Quote goes here"</p>
        <h1>Site name</h1>
        <p>Motto and slogan goes here</p>
      </div>
    </div>
  </div>
</body>

Any assistance would be greatly appreciated!

Answer №1

Did you remember to enclose your CSS in the <style> tags?

<style type="text/css>
 .jumbotron 
    {
        background-color: blue !important; 
    }

body
    {
        background-color: white;
    }
</style>
<body>
  <div class="body">
    <div class="jumbotron">
      <div class="container text-center">
        <p>"Quote goes here"</p>
        <h1>Website name</h1>
        <p>Motto and slogan go here</p>
      </div>
    </div>
  </div>
</body>

https://i.sstatic.net/5XLHa.png

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

Discover the steps to incorporating events that enable page transitions for a dynamically generated listview using jQuery Mobile

By utilizing the following code snippet, I successfully inserted data into the listview: var renderItemElement = function(item) { return $.tmpl("<li><a>${text}</a></li>", item) .data("item", item) .insertAfter( ...

Do mouse users prefer larger buttons on RWD sites for a better experience?

Not entirely certain if this platform is the most suitable for posing this query, so if warranted, please close it and recommend a more appropriate venue for such inquiries. In the realm of responsive web design (RWD) today, it is common practice for webs ...

What is the best way to ensure an input field and a button are aligned perfectly within the same div tag and of equal height?

During a recent HTML-CSS project, I encountered an issue where I struggled to ensure that two elements within a div tag were the same height. The elements in question were an input field and a button with an icon. Here is a snippet of the relevant HTML cod ...

Troubleshooting: Why is PHP/HTML Code Displaying as Text in Email?

I have made numerous attempts to modify the header without success. Could it possibly be an issue with the email server? Or is there a crucial aspect that I'm overlooking? I would appreciate if more than just the code appears as plain text in the fi ...

Automatically adjusting tab heights with jQuery

Having an issue with the jQuery tabs on a school website project. Looking for some assistance with JavaScript. Check out the page here: 71.50.205.125/staugie.net/school/admin, it's my current work in progress. Created a user account with username "tes ...

Adjust the Bootstrap row height to both occupy the full height while also being limited by the height of a designated container

Here's a puzzling question.. I've got a container with multiple rows, and I want these rows to completely fill the container's height without overflowing. I'm trying to avoid manually setting the row heights. When I add class="h-1 ...

Guide on building a 2 x 2 grid layout with NativeScript's GridLayout

The Challenge I'm having trouble arranging images in a grid format with 2 rows and 2 columns, centering them evenly. Despite my efforts to experiment with different layouts, I've encountered some setbacks as shown below: https://i.sstatic.net/ ...

Revolutionizing Zen Cart with slimMenu

Is there a smarter person out there who can help me understand why the slimMenu is breaking when I add these files to the bottom of the page? <link href="includes/templates/westminster_new/css/age-verification.css" rel="stylesheet"> <script src=" ...

Tips for creating endless scrolling <div> functionality

I have been attempting to create a scrolling effect in this div with columns that moves down infinitely - Example, like the one on this Google developer page - Google developers || Infinite scroller image. However, I have not been successful so far. I have ...

HTML form for selecting shipping method in PayPal

In my shopping cart setup, I offer two shipping methods: 'express' and 'standard'. I'm wondering if it's feasible to transmit this data to PayPal using HTML variables? ...

Using Bootstrap SCSS in ReactJS without applying Bootstrap CSS classes

After successfully installing bootstrap using the following command: npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999edf7e9f7e9f4b8b5a9b1b8f7ef">[email protected]</a> --save my d ...

Utilizing Tabs for Column Organization

I'm struggling to change the starting point of my tabs on the app bar. I would like them to begin after the third column, but I haven't been successful in getting it to work. Here is the code: <template> <div class = "header" ...

Preventing default CSS styles in ASP.NET: A step-by-step guide

When working with multiple CSS files for different themes, I noticed that the Login Page is calling one extra CSS file. However, during runtime, some classes from the default CSS are still being used. How can I resolve this issue? ...

Discrepancy in Angular Material Buttons with theme design

I recently installed Angular 10 along with Angular Materials using the command ng add @angular/material I opted for the custom theme: Purple/Green The next step was to add a Toolbar by simply copying and pasting code from Google's site. However, I a ...

ul/div element not displaying background color

I am attempting to showcase navigation items horizontally within a blue colored ribbon. Despite my efforts, the background-color property is not being applied to the ul element. I even tried enclosing it in a div element with a blue background, but still n ...

What is the best way to align my text to the bottom of a table header in a vertical manner?

I am working with a series of nested tables and this is the basic structure: <table> <tr> <td> <table> <thead> <tr> <th></th> <th ...

What is the process for retrieving content from an HTML page and displaying it using Python?

I am looking to retrieve the current 'max' forecast value from the following page: and display that value using Python. Could someone guide me in accomplishing this task? (I am new to programming so apologize if this is a basic question!) Plea ...

Struggling with getting a page-break to properly function within a Bootstrap modal

I have a Bootstrap (v4) Modal that consists of multiple sections, and I am trying to print the content of the modal-body with each section starting on a new page. To achieve this, I have included the following CSS: section { page-break-after: always; ...

Issue with @media print and hiding elements

I've been racking my brain for hours trying to figure out why this isn't working. I have a Wordpress site where I'm attempting to hide the header, menu, and footer content from being printed. Within my theme's style.css file, there is a ...

CSS table cell doesn't expand to the full width of the screen

I am experiencing an issue with the layout of my website. Here is the code snippet causing the problem: <div class="xx-row"> <div class="background-image" style="background-image: url('<?php echo theme('background_image', &a ...