Instructions for changing the background of a specific area to gray

Could use some assistance in changing the red area to grey, tried numerous solutions but can't figure it out. Any help would be highly appreciated!

Looking to change the background to a light grey excluding the top bar and navigation. Image

Current Code:

<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Overview</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Analytics</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Export</a>
        </li>
      </ul>

      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Nav item</a>
        </li>
        ...
      </ul>
    </nav>

    <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2">
      <h1>Title</h1>

      <div class="row">


          <div class="col-md-6">
              <div class="panel panel-default">
                ...
              </div>            
            </div>


        <div class="col-md-6">
          <div class="panel panel-default">
            ...
          </div></div>










            <div class="panel panel-default">
              <!-- Default panel contents -->
              ...
      </div>
    </div>
    </main>
  </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
...
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

Your insights and guidance on this matter are deeply appreciated!

htmlcsstwitter-bootstrap

Answer №1

To customize the style of Bootstrap components, you must write your own CSS rules.

Specify the selectors for each specific element you wish to modify.

For instance:

header,
header .nav,
header .nav .nav-item 
/* add any other elements you want to target */
{
  background-color: lightblue;
}

Answer №2

If you're in search of a way to change the background color using CSS, what you need is the background-color property. A good choice for color would be #939393.

To implement this, you can add: style="background-color:#93939; within your <main> tag

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Overview</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Analytics</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Export</a>
        </li>
      </ul>;

      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Nav item</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Nav item again</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">One more nav</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Another nav item</a>
        </li>
      </ul>

      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link" href="#">Nav item again</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">One more nav</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
        </li>
      </ul>

    </nav>

    <main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2" style="background-color:#939393">
      <h1>Title</h1>

      <div class="row">


            <div class="col-md-6">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">Info</h3>
                    <a href="#"><button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button></a>
                  </div>
                  <ul class="list-group">
                    <div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
                        <div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
                      </div></div></li>

                      <div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
                        <div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
                      </div></div></li>

                      <div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
                        <div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
                      </div></div></li>

                      <div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
                        <div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
                      </div></div></li>
                  </ul>
                </div>;            
              </div>; 
          </div>;

          <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-heading">                  
                  <h3 class="panel-title">Title</h3>
                </div>


                <ul class="list-group">
                    <li class="list-group-item">24th November 17<p class="task-edit">
                        <span class="glyphicon glyphicon-pencil"></span>
                      </p><p class="task-delete">
                        <span class="glyphicon glyphicon-trash"></span>
                      </p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>

                    <li class="list-group-item">24th October 17<p class="task-edit">
                      <span class="glyphicon glyphicon-pencil"></span>
                    </p><p class="task-delete">
                      <span class="glyphicon glyphicon-trash"></span>
                    </p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>

                    <li class="list-group-item">24th September 17<p class="task-edit">
                      <span class="glyphicon glyphicon-pencil"></span>
                    </p><p class="task-delete">
                      <span class="glyphicon glyphicon-trash"></span>
                    </p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>

                    <li class="list-group-item">24th August 17<p class="task-edit">
                      <span class="glyphicon glyphicon-pencil"></span>
                    </p><p class="task-delete">
                      <span class="glyphicon glyphicon-trash"></span>
                    </p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
                  </ul>
                </div>;           
              </div></div>;

Answer №3

Is there a specific div that encompasses them all? Your skills in this area are impressive, so I trust you have attempted to identify the class name and apply a background-color="someShadeOfgrey"... This can be achieved using the < style> tag or a CSS file :)... Alternatively, you could simply incorporate it with the < div> tag

<div class="myClass" style="background-color:grey;">

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

How can I add styling to materializecss chip elements?

When working with tags on a web page, Materializecss makes it easy. However, I have a requirement where the tags need to be of different colors based on their types. Although this is feasible, another complication arises when supporting Materializecss keyb ...

javascriptcssmaterialize

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm fac ...

csshtml-tableresponsivebootstrap-4dynamic-columns

Is it considered improper to include non-input HTML elements within a form tag in Angular reactive forms?

When working with an angular reactive form to manage html inputs, is it acceptable to include non-input html elements within the form tags? NOTE: The previous example has been removed. A new one will be provided soon. ...

htmlangular

Tips and tricks for seamlessly aligning a specific section of your webpage to ensure it scrolls smoothly into view

My codes are not being centered when I use smooth scrolling on a specific section of a Bootstrap carousel template. Is there an easier way to achieve this? The explanation in a post from six years ago didn't help much. Here are my codes and screenshot ...

javascripthtmlcssbootstrap-4

Input the chosen icon list values into a designated box

As a beginner in the world of Javascript, I am venturing into creating a password generator that involves using icons. The concept is simple - by clicking on any number of icons from a list, the corresponding hex code will be displayed in an input box. The ...

javascriptjqueryhtml

Can anyone advise on the proper way to import CSS within a React component?

I'm currently working on a React component named Comp1 and I've included a CSS file within it like so: import "./style.css"; Within the style.css file, I'm using the following line: @import "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi ...

cssreactjs

PHP tag iteration for unordered list segmentation

My current method of fetching data from MySQL is as shown below: $catmapper = new Application_Model_Mapper_BusinessCategoryMapper(); $result = $catmapper->getBusinessCategory(); To display the results, I use a for loop to iterate through and wrap each ...

phpjqueryhtmlcsshtml-lists

Incorporate the {{ }} syntax to implement the Function

Can a function, such as toLocaleLowerCase(), be used inside {{ }}? If not, is there an alternative method for achieving this? <div *ngFor="let item of elements| keyvalue :originalOrder" class="row mt-3"> <label class=" ...

htmlangulartypescriptfrontend

Invoke a bounded function within an Angular directive using the ng-click event

I was wondering if it's possible to invoke a bound function within a directive by clicking on a specific part of a div. Currently, I have a div with an inner div that acts as a button for expanding the main div. The larger div has a directive associat ...

javascripthtmlangularjsdom

Ways to stop a hyperlink from executing on confirmation cancel using jquery

I'm having trouble with a link that should not perform any action when the cancel button is clicked. I've attempted to use false in the click event and also tried using e.preventDefault, but I'm unsure if I am implementing it correctly. Can ...

jqueryhtml

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

Utilizing CSS to place an image on top of the upcoming <div> container

My goal is to create a layout similar to the one displayed in the linked image. https://i.stack.imgur.com/7DSE9.jpg Currently, I am using Bootstrap 3 and my HTML markup looks like this: <body class="gray-bg"> <section class="white-bg"> <d ...

htmlcsslayoutposition

What is the best way to apply custom styles in reactJs to toggle the visibility of Google Maps?

There are three radio buttons that correspond to school, restaurant, and store. Clicking on each button should display nearby locations of the selected type. Displaying Google Map and nearby places individually works fine without any issues. class Propert ...

javascriptcssgoogle-mapsreactjsgoogle-maps-markers

Tips for making a table have the same width as its child td elements and enabling the table to exceed the width of the viewport

I am facing a challenge with a table that has dynamically changing rows and columns. <table> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> <tr> <td> ...

javascriptjqueryhtmlcss

All you need to know about fundamental HTML attributes

I've been struggling to resize images on my webpage. No matter how many times I change the attributes in the image tag, the image always shows up at its original size. For example, I tried this: <img src="url" alt="some text" style="width:40px;he ...

htmlcssimage

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...

javascripthtmlcss

unable to load the ajax file

While setting up Ajax, I encountered an error message in IE that reads: Description: An issue occurred during the processing of a configuration file needed to handle this request. Please check the specific error details below and adjust your configuration ...

c#htmlajaxvisual-studio-2010

Issue with concealing floated elements within a container div

I am currently facing an issue with trying to hide floated divs within a parent div, but unfortunately my code is not working as expected. Here is the code snippet: div.scrollarea { overflow: scroll; width: 400px; ...

htmlcss

Utilize JavaScript to trigger a function depending on the selected options from dropdown menus

I've been working on a fun little project for a web page where users can select two items from a drop-down menu and then click a button to play a sound corresponding to their selections. However, I'm facing some challenges with getting my JavaScr ...

javascripthtmldrop-down-menu

The feature to swap out the thumb of a range slider with an image is currently not

I'm attempting to design a unique range slider using CSS. <style> .slide-container { width: 300px; } .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: #FFFFFF; outline: none; opacity: ...

htmlcssslider