Customize scaffolding.less for the body element

Recently, I've been putting together a webpage and decided to incorporate Bootstrap into the design. However, after adding Bootstrap, I noticed that it changed the background color of the body on my site. I have included a link to the fiddle below for reference. Currently, my website looks like the second image in comparison to the first image, which showcases the original desired look.

Is there a recommended method to override this issue and revert back to the original background color from the first image?

https://i.sstatic.net/1d6CA.png

jqueryhtmlcsstwitter-bootstrap

Answer №1

Include the following style code snippet after you've linked the bootstrap.min.css file:

Similar to your style.css file, add this-

body {
        background-color: #161A25;
        margin:0;
    }
    #logo {
        position:absolute;
    left:0;
    top:0;
    }
    h9
    {
      color: white;
        position:absolute;
    right:25rem;
    top:2.5rem;
        font-size: 10px;
        font-family: 'Raleway', sans-serif;
    }
    h6
    {
      color: white;
        position:absolute;
    right:15rem;
    top:2.5rem;
        font-size: 10px;
        font-family: 'Raleway', sans-serif;
    }
    h7
    {
      color: #32CE87;
        position:absolute;
    right:2rem;
    top:1.5rem;
        font-size: 7px;
        font-family: 'Raleway', sans-serif;
    }

    h8
    {
      color: white;
        position:absolute;
    right:2rem;
    top:1.5rem;
        font-family: 'Raleway', sans-serif;
        font-size: 17px;
       color: #32CE87;
    }

    .footer {
       position: fixed;

       bottom: 0;
       width: 100%;
        height:110px;
       background-color: #2A3046;
       color: white;


    }

    img.logo {
       height: 80px;
         left:3em;
        position: relative

    }
    img.logo1 {
       height: 40px;
        left:3em;

        bottom:2rem;
        position:absolute;
    }



    .my-button {
        display: inline-block;
        margin: 5px;
        background: #32CE87;
        color: white;
        font-size: 1.5em;
        font-family: 'Raleway', sans-serif;
        text-align: center;
        border-radius: 5px;
        padding: 8px 16px;
        -moz-transition: all 0.2s;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        width: 100px;
        text-decoration: none;
    }
    .my-button:hover {
        background: #666;
        color: #c1e1e0;
    }
     .center-bottom {
        position: fixed;
        bottom: 12rem;
        width: 100%;
        text-align: center;
    }
    img.arrow {
        max-height: 40px;
    }

    .row {
        background-color: white;
        max-width:100%;
       height: 150px;
        border-radius: 5px;
        padding-top: 20px;
        padding-bottom: 50px;;

        margin-top: 0.1rem;
        margin-left: 25px;
        margin-right: 25px;

    }
    .box1 {
        background-color: white;
        max-width:100%;
        height:150px;
        padding-bottom:50px;

        margin-top: 0.5rem;
        margin-left: 25px;
        margin-right: 25px;
         border-radius: 5px;


    }
    p {
        font-size:7px;
        width:380px;
        position: absolute;
        right:12em;
        text-align: left;
        bottom: 1.5rem;

    }
    img.laptop { 

        height: 60px;
        position: absolute;
        left:0px;
        right: 0px;


        margin-left: auto;
        margin-right: auto; 
    }
    div.bottomtext {
        position: relative;
         left:0px;
        right: 0px;
            font-family: 'Raleway', sans-serif;
        margin-left: auto;
        margin-right: auto; 
        text-align: center;
     width:800px;
        top:4rem;
        font-size: 0.6rem;


    }

    img.textimage
    {
        height:20px;
        left:8rem;
        position: absolute;
         font-family: 'Raleway', sans-serif;
    }

    .images {
        display: inline;
        margin: 0px;
        padding: 0px;
        vertical-align:middle;
        width:200px;
    }
    #content {
        display: block;
        margin: 0px;
        padding: 0px;
        position: relative;
        top: 90px;
        height: auto;
        max-width: auto;
        overflow-y: hidden;
        overflow-x:auto;
        word-wrap:normal;
        white-space:nowrap;
        height: 50px;
    }

    img.column {
        height: 40px;
        width: 100%;
        position: relative;
        padding: 0px;
        margin: 0px;
    }

    img.row
    {height:60px;

    }
    h9:hover {
          color: #32CE87;
    }
    h6:hover {
          color: #32CE87;

    }
    p:hover {
          color: #32CE87;

    }
    h7:hover {
          color: white;

    }
    h8:hover {
          color: white;

    }
    .pt-inner-wrap {
        color: #ecf0f1;
        padding: 15px 0;
        text-align: center;
        color: black;
        border-right: 3px solid #d4d4d4;   
        }

    div.container {

    margin-bottom: 1rem;
    }

After that, include this... style.css file in your project once you have added bootstrap.min.css file

<!DOCTYPE HTML> 
<html>
<head>
     <meta charset="utf-8">


    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

   <link href="style.css" rel="stylesheet" crossorigin="anonymous">

    </head>   

<body>
    <img src="Logo-Trans.png" class="logo" >

    <div class="toptext"> 
    <h9> GET A QUOTE</h9>
    <h6> RETRIEVE A QUOTE</h6>
    <h7>NEED HELP OR ADVICE?CALL US <br style>  </h7>
        <h8> 0800 0481804</h8>
        </div>



<img src="nav.png" class="column"> 






<div class="container">

  <div class="row">


<div class="col-sm-4">
<div class="pt-inner-wrap">     
    <i class="fa fa-mobile fa-4x"></i>
    <h4 class="pt-title">Mobile &amp Smartphone</h4>
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
<div class="col-sm-4">
    <div class="pt-inner-wrap">     
    <i class="fa fa-mobile fa-4x"></i>
    <h4 class="pt-title">Ipad's &amp Tablets</h4>
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
<div class="col-sm-4" >
    <div class="pt-inner-wrap">     
    <i class="fa fa-mobile fa-4x"></i>
    <h4 class="pt-title">Laptops &amp Macs</h4>
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
    <img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
    <h6 class="pt-title">How many would you like to insure</h6>
</div>
</div>
  </div>
</div>          

 <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>




      <div class="box1"> 


<div> <img src="laptop.png" class="laptop"> </div>


<div class="bottomtext">Please enter a figure for the number of individual laptops/macbooks that you would like to insure in each price range. <br> Where you dont want cover with a particular price range, please leave bank.</div>
    </div> 





    <div class="footer">

       <div class="center-bottom">

<a class="my-button" title="Relevant Title" href="#">Back</a>
<a class="my-button" title="Relevant Title" href="#">Next</a>

</div>

  <p> © Insync Insurance Solutions Ltd 2016 All rights reserved. Mobiru is a trading style of Insync Insurance Solutions Ltd which is authorised and regulated by the Financial Conduct Authority. Our registered office is Midland House, 2 Poole Road, Bournemouth, Dorset BH2 5QY and we are registered in England under company number 08810662. Should you have cause to complain, and you are not satisfied with our response to your complaint, you may be able to refer it to the Financial Ombudsman Service, which can be contacted as follows: The Financial Ombudsman Service Exchange Tower, London, E14 9SR | Tel: 0800 023 4567 or 0300 123 9 123 | www.financial-ombudsman.org.uk </p>
          <img src="Logo-Trans.png" class="logo1">
</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

What is the proper location for inserting image copy code within my codebase?

I encountered an issue with using this code: copy('imgurl', 'images/covers/file.jpeg'); The code successfully copies an image URL to a file on my website when placed in a PHP page alone, but it fails to work within my actual code. He ...

phphtmlajaxdatabase

Interaction between a main webpage and a separate popup OAuth authorization page

I need assistance with my application that includes a button to open a blank page for LinkedIn authentication. My main query involves how to notify the original page once the user has successfully completed the authentication and processing for LinkedIn. ...

phpjqueryoauthlinkedin-api

Substitute the images with links provided in an external text file

I have a function that I use to replace avatars of players with custom images. Currently, I have three replacement links hardcoded into a Chrome extension. However, I want the function to read an external txt file to dynamically build an array so that I ca ...

jqueryhtmljson

How to apply unique styles to multiple elements with the same class using jQuery?

How can I add different classes to multiple div elements with the same class based on their content? <div class = "flag"> Yes </div> <div class = "flag"> No </div> <div class = "flag"> Yes </div> <div class = "flag"& ...

javascripthtmljquerycss

Develop dynamic and stylized CSS using PHP within the Laravel framework

I am experiencing an issue with creating CSS files in Laravel within my controller. When I try to return the result, it shows up as a normal text file instead of a CSS file. In my routes.php file, I have: Route::get('/css/{css}.css', 'File ...

phphtmlcsslaravel

Refreshing Ajax in a different tab causes the selectize element to become unbound from the editing form in Rails 5

In my Rails 5.1 application, I have multiple views with the main view being the calls index view. In this view, I perform an ajax refresh of partials and use a callback to re-initialize the selectize JS element in the calls/index view as shown below: < ...

javascriptjqueryruby-on-railsajax

Building an event management system using CodeIgniter and jQuery to create a seamless scheduling calendar

I am in the process of creating an event and scheduling calendar using codeigniter and jquery. It is important for me to be able to have multiple events on the same day while keeping the design clean and user-friendly. If anyone has any recommendations fo ...

phpjquerycodeignitercalendar

to invoke a jQuery function located on a different webpage

Imagine you have two web pages: hello.html and wow.html. hello.html contains the following script: <script> $(document).ready(function() { $( "#loader" ).load( "wow.html"); }); </script> while wow.html includes this jQuery function: $(fun ...

jqueryhtmlajax

Avoid unnecessary extra margin on CSS div elements

Currently working with Bootstrap4. In a row with 2 col-md-6 (totaling 12 columns for the row). However, experiencing an unwanted margin on the left column as shown in the image below. How can I remove it? https://i.sstatic.net/u5oix.png html: <hea ...

htmlcsstwitter-bootstrapbootstrap-4

Convert a JavaScript object into a serialized form

Alright, so here's the thing that's been bugging me. I have this JavaScript object that I need to pass to a PHP script using jQuery AJAX. But every time I try to pass it as is, I get an error. It seems like the object needs to be serialized befor ...

javascriptjqueryserialization

Browsing through files on IE8 within one window

I recently encountered an issue that I have never experienced before. Typically, when browsing through my folders in Internet Explorer, everything worked smoothly for me. If I included various directory links, I could easily navigate back and forth to expl ...

htmlinternet-explorer-8

What is the correct way to utilize ng-if/ng-show/ng-hide to hide or show HTML elements within the app.run function

I am currently working on developing an app that loads views correctly. HTML: <body> <loading outerWidth='1000' outerHeight='1000' display='isReady'></loading> <div class='wrapper' ng-sho ...

javascriptjqueryhtmlangularjs

Is the success function in jQuery programmed to only expect a status code of 200?

When using an ajax success function, is it always expected that the status code will be 200? Or could a response with status codes like 304 or 503 still be considered successful? What criteria determines its success? ...

jqueryajax

Adjust iFrame size if the width of the screen is lower than x

My website includes an iFrame showcasing a 990x90 advertisement. I am looking for a solution to ensure that mobile viewers can also see the ad on their devices. I need the iframe to resize proportionately based on the screen width; for instance, if the sc ...

htmliframe

Tips for fetching integer numbers in a string in JavaScript in sequential order starting from the left side

Within an input element, users are required to input the price of a product. <input size=10 type="text" id="prd_price" title="prd_price" name="prd_price"> Users have the ability to enter Currency Symbols along with other characters, and we cannot ...

javascripthtmlinputnumberssequence

Pressing the dart key will alter the sprite's direction in a 2D game

Recently, I've been working on a Dart game where the user controls a space ship sprite using the W, A, S, and D keys. Pressing these keys will move the sprite up, left, right, and down respectively. Additionally, pressing the Space bar will launch a p ...

htmldartgame-development

Toggle the slide when you hit submit

I'm considering the functionality of my code. I am interested in creating a slide toggle effect on a div or span when hovering over an input submit button. Here is an example: https://i.sstatic.net/pBSK8.png What is the best approach to achieve thi ...

jqueryhtmlcss

Having trouble getting jQuery to function properly in Safari

I am facing an issue with jQuery in the Safari browser. While my jQuery functions are functioning perfectly on GC, FF, IE, and Opera, they seem to fail when tested on Safari. My question is: Is there a specific code snippet that I can integrate into my w ...

javascriptjquerysafari

The impact of adjusting the article's margin-top on the margin-top of

I want these two divs to have different positioning. The sidebar should remain fixed at the top. Why is the sidebar aligned with the article div instead of sticking to the top? body{ margin: 0; padding: 0; } div#sidebar{ background-color: yel ...

htmlcss

Using Jquery to locate the next div element

I've created this code snippet, but it's not functioning as expected. However, by reviewing it, you can understand my intended outcome: $('.jfmfs-alpha-separator').filter(function() { return ($(this).next().not(".hide-filtered"). ...

javascriptjquery