Tips for creating a double background color effect outside of a container

I want to create a footer similar to this design:

https://i.sstatic.net/BIn4C.png

html

<footer>
    <div class="container">
        <div class="row">
            <div class="col-7 copyright__text py-3">
                COPYRIGHT TEXT
            </div>
            <div class="col-5 contact p-3">
                dsadsada dsa dasdsa
            </div>
        </div>
    </div>
</footer>

css

footer .copyright__text{
background-color: rgb(152, 181, 79);
}

footer .contact {
background-color: rgb(81, 89, 103);
}

This is how it currently appears:

https://i.sstatic.net/o1sGE.png

I am aiming towards center-aligning the text like in the image above. Using container-fluid did not provide the desired result as the text was not centered correctly and was sticking to the sides...

htmlcsstwitter-bootstrap

Answer №1

footer .copyright__text{
background-color: rgb(152, 181, 79);
}

footer .contact {
background-color: rgb(81, 89, 103);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
    <div class="container-fluid">
        <div class="row">
            <div class="col-7 copyright__text py-3">
                COPYRIGHT TEXT
            </div>
            <div class="col-5 contact p-3">
                dsadsada dsa dasdsa
            </div>
        </div>
    </div>
</footer>

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

Placing a placeholder value for the current amount

Within my Controller, I am utilizing: MessageContent.new(language: "en", body: "Write your english text here", title: "", sender: "Admin") I am looking to insert the body as a placeholder in my input field within the view: = f.input :body I have been ...

htmlruby-on-railshamlformtastic

Vuejs unstyled content flash

I encountered an issue while loading a page with Vue. Initially, I am able to access variables like @{{ value }} but once the page is fully loaded, the variable becomes invisible. How can I resolve this issue? I have already included Bootstrap and all scri ...

javascripthtmlvue.js

Ensure that everything within the Container is not see-through

Fiddle:https://jsfiddle.net/jzhang172/b09pbs4v/ I am attempting to create a unique scrolling effect where any content within the bordered container becomes fully opaque (opacity: 1) as the user scrolls. It would be great if there could also be a smooth tr ...

javascriptjqueryhtmlcss

Sliding out the existing content and smoothly sliding in a fresh one upon clicking

Thank you for taking the time to read this. I've created a navigation bar and a few DIVs. What I want to achieve is when a button is clicked, the current DIV slides to the left and out of the page, while a new DIV slides in from the right. [http://w ...

jqueryhtml

Display HTML in JavaScript without altering the Document Object Model

Is it possible to style a custom HTML tag called "location" without directly modifying the DOM? For instance, having <location loc-id="14" address="blah" zipcode="14" /> Would it be feasible to render it like this: <div class="location"> ...

javascriptjqueryhtmlcssdom

Styling Divs Beside Each Other Using CSS

I'm attempting to display the "left" and "right" divs side-by-side in the following example. However, they are not appearing next to each other as expected. Can someone point out my mistake? Thank you. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

htmlcss

Can you explain the significance of 'height: 0;' in CSS coding?

I've recently come across some outdated CSS code that sets the height to height: 0; in multiple places. I'm curious about what this 0 signifies and what unit it is measured in. If anyone could provide some insight, I would greatly appreciate it. ...

htmlcss

What's the reason behind jQuery's position() and offset() methods returning decimal numbers in Chrome browsers?

In my HTML document, I have a simple div tag that is absolutely positioned. In Chrome, when I set the CSS rule "right" to a fixed value in pixels and "left" to "auto", then use jQuery's position() method to determine its left position immediately afte ...

jquerycssgoogle-chrome

How to create a clickable image in email HTML when the image is set as a background image for

Is there a way to make an image clickable within an HTML email, even if the image is set as a background-image URL? I would typically wrap the DIV in an "a href", but I am uncertain if this method is supported by email clients. The image is set as a back ...

htmlhtml-email

Tips for displaying a table with a button click

I am struggling to figure out how to embed a table inside a button in order to display the table when the button is clicked and hide it when clicked again. Below is the code I have been working with: function toggleTable(){ document.getElementById ...

javascripthtmlcss

Ways to verify if the CSS background-color is set to white?

I am looking for a solution: $('*').click(function() { if($(this).css("background-color") == "#ffffff") { $(this).css("background-color") == "#000000" } });​​​​ that will execute on click of a specific cla ...

javascriptjquerycsscolors

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...

javascripthtmlcssdom

Tips for resolving the "Forbidden compound class names" error that occurs when trying to select an input field

As a newcomer to selenium, I am eager to start testing the login page. The text field below is where I need to input the username: <div class="WODM WNDM" data-automation-id="userName"> <div class="gwt-Label WBEM">Email Address</div><i ...

pythonhtmlselenium

Using JavaScript functions on HTML data loaded by the jQuery.append() method: A guide

Utilizing JSON data, I have successfully generated HTML content representing Questions and Multiple Choice Questions. My next goal is to capture user responses in an array after the submit button is clicked. This involves storing which radio button the use ...

javascriptjqueryhtmlcss

Is there a way to confirm if an element's predecessor includes a specific type?

I am working on an app where I need to determine if the element I click on, or its parent, grandparent, etc., is of a specific type (e.g. button). This is important because I want to trigger a side effect only if the clicked element does not have the desir ...

javascripthtmlreactjstypescript

Chrome experiencing problems with placeholder text fallback event

My text field has a placeholder text that says "First Name". When the user clicks on the field, the text disappears and allows them to type in their own text. HTML <input class="fname" type="text" placeholder="First Name"/> JS function handlePlac ...

javascripthtmlgoogle-chromeplaceholder

Tips for extracting elements from an HTML page

I am in the process of using PHP to extract specific information from an HTML webpage. I am encountering difficulties with extracting all the values between <span class="fpStriked">....</span>, for example. $url = 'https://www.amazon.com/ ...

phpjqueryhtml

Unable to create a webpage that allows for the importing of data from Excel VBA

Seeking assistance with the following query... I am using excel vba to input a serial number into a webpage and then clicking on a 'Check Warranty' button on the page. The expected outcome is for more data to be displayed, but instead, when click ...

excelvbainputhtml

Arrange items between multiple selection areas

I have two multi selects, mySelectNumberTest1 and mySelectNumberTest2. My goal is to select items in the first dropdown and then with a trigger event, populate those options into the second dropdown. In my search for a solution, I came across this link: G ...

javascripthtmlangularjs

Place an overlay element in the top-left corner of a perfectly centered image

Currently, there is an image that is centered on the screen using flexbox: .center-flex { display: flex; justify-content: center; } <div class="center-flex"> <img id="revealImage"> </div> An attempt is be ...

javascripthtmlcss