Steps for adjusting the color of text to white on form input labels and paragraphs in bootstrapIf you want to

Hi there, I am facing an issue with my signup form that is placed on top of a full-screen video. I am using Bootstrap and struggling to change the text color to white for the form labels and the paragraph next to the form. Being new to Bootstrap, I have only found conflicting colors within the paragraph class, making it difficult to match my design. I simply need to make the text white but unsure how to achieve this result.

Below is the code snippet:

<div class="container-fluid">
<section class="container">
    <div class="container-page">                
        <div class="col-md-6">
            <h3 class="dark-grey">Registration</h3>

            <div class="form-group col-lg-12">
                <label>Username</label>
                <input type="" name="" class="form-control" id="" value="">
            </div>

            <div class="form-group col-lg-6">
                <label>Password</label>
                <input type="password" name="" class="form-control" id="" value="">
            </div>

            <div class="form-group col-lg-6">
                <label>Repeat Password</label>
                <input type="password" name="" class="form-control" id="" value="">
            </div>

            <div class="form-group col-lg-6">
                <label>Email Address</label>
                <input type="" name="" class="form-control" id="" value="">
            </div>

            <div class="form-group col-lg-6">
                <label>Repeat Email Address</label>
                <input type="" name="" class="form-control" id="" value="">
            </div>          

            <div class="col-sm-6">
                <input type="checkbox" class="checkbox" />Sign up for our newsletter
            </div>

            <div class="col-sm-6">
                <input type="checkbox" class="checkbox" />Send notifications to this email
            </div>              

        </div>

        <div class="col-md-6">
            <h3 class="dark-grey">Terms and Conditions</h3>
            <p>
                By clicking on "Register," you agree to The Company's' Terms and Conditions
            </p>
            <p>
                While rare, prices are subject to change based on exchange rate fluctuations - 
                should such a fluctuation happen, we may request an additional payment. You have the option to request a full refund or to pay the new price. (Paragraph 13.5.8)
            </p>
            <p>
                Should there be an error in the description or pricing of a product, we will provide you with a full refund (Paragraph 13.5.6)
            </p>
            <p>
                Acceptance of an order by us is dependent on our supplier's ability to provide the product. (Paragraph 13.5.6)
            </p>

            <button type="submit" class="btn btn-primary">Register</button>
        </div>
    </div>
</section>
</div>
htmlcsstwitter-bootstrap

Answer №1

Try this solution:

form, input, label, p {
    color: white !important;
}

When utilizing bootstrap, it is often necessary to use !important to override the default bootstrap css styles.

Answer №2

To give a white color to both the label and p tag, you can use the following CSS:

.form-group label, p{
  color: #fff;
}

If the above code doesn't work, try using !important like this:

.form-group label, p{
  color: #fff!important;
}

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

Picture featuring a div element serving as a partial background

How can I achieve a blue bar background behind this image? https://i.sstatic.net/RLysr.png This is my current approach: .line-divider{ height: 125px; background-color: #29334B; } <div> <div style="background-color: green; width ...

htmlcss

Send an array of data from the view to the Controller in CodeIgniter

I have been searching for a solution to this question. However, for some reason, my code is not functioning properly. Here is what I want to achieve: Data Array -> ajax post -> codeigniter controller(save data in DB and redirect to another page) ...

javascriptphphtmlajaxcodeigniter

Utilize AngularJS to bind a variable and display an external HTML file without the need to open it in a browser

In my setup, I have two HTML Views - one is for application purposes and the other is for printing. Let's call them Application.html and PrintForm.html, respectively. Here is a snippet from Application.html: <!DOCTYPE html> <html> < ...

javascripthtmlangularjsprintingangularjs-bindings

Access the data points within a form

I am struggling to retrieve the data from the form as it is showing undefined in all JSON fields. I prefer not using the $scope variable and instead, I have a variable "vm" set up to store the controller. employees.html <!--Modal--> <div class=" ...

htmlangularjs

Is there a way to execute a jar file using JavaScript?

Hello, I'm new to this and still learning. I have a jar file that takes one parameter and returns a JSON with the result. Could someone please advise me on how to run my jar using JavaScript? I've attempted the following code but it's not wo ...

javascripthtmljar

Utilize Python to extract search results from The New York Times website

Looking to scrape search results from NYTimes. To begin, the scraping process starts with: url = "http://query.nytimes.com/search/sitesearch/?action=click&contentCollection&region=TopBar&WT.nav=searchWidget&module=SearchSubmit&pgtype=H ...

pythonhtmlweb-scraping

Tips on how to stop label text from wrapping onto a new line and only show one line

Working with asp.net mvc, I am encountering an issue where the label text is displaying on two lines instead of one. The expected behavior is for it to appear on a single line. I need the label text to display without wrapping to a new line. For example, ...

htmljquerycssasp.net-mvcasp.net-mvc-4

Having Trouble with Your CSS Styles?

After working with HTML and CSS for over 5 years, I find myself stumped by this particular issue. At the provided URL, there is a single div in that container with an ID of Clarity. The CSS rules I have implemented are as follows: #clarity { text-align: ...

htmlcss

What can I do if my website doesn't show the CSS changes I've made?

I have encountered a strange issue while working on my website using Filezilla. For some reason, the CSS has stopped working and despite making changes to the code, nothing is being displayed. I attempted to delete all files from Filezilla and re-upload th ...

css

The inline-block property does not seem to be functioning as expected within Bootstrap

Take a look at my custom Navbar component: const Navbar = () => { return ( <div className='Navbar'> <ul className='list-group w-75 mx-auto'> <li className='list-group-item'> & ...

htmlcssreactjsbootstrap-4

Achieve a straightened appearance for background images within a skewed container

Can I un-skew the content inside a skewed carousel, while preserving the diagonal effect on the slide container? Check out the Jsfiddle example here - https://jsfiddle.net/czcjt3no/1/ <div class="section"> <div class="grid poly--holder"> ...

jqueryhtmlcssskew

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

javascripthtmlajaxscroll

Employing the mouseover and mouseout functions within an element will result in a constant, flickering hover

When dynamically rendering two elements on a JSP page with dynamic IDs and displaying a div on mouse over, how can I prevent the blinking effect when hovering over the displayed div? Example code: <table> <tr> <td> ...

javascriptjqueryhtmlajaxjsp

Modify the shading of the mesh generated with the face3 method

I have utilized face 3 and three js to generate a mesh, but the expected color is not displaying correctly on the mesh. Below is the code snippet I used: var geometry = new THREE.Geometry(); var f = 0; for (var i = 0; i < data.real.length ...

javascripthtmlthree.js

Swap the image (either the last or first child) within a div when it is hovered over

I have multiple Div's on my webpage and I am looking to change the color and image when a mouse hovers over them. Changing the text color from grey to blue is quite simple. CSS #div1:hover{color:#0000CC} If I want to change an image, I can achieve ...

css

201 Ways to Toggle Submenus with JavaScript

Just dipping my toes into the world of javascript and web development, I'm currently struggling to make my submenu's in the sidebar navigation area appear when clicked. Opening them individually with repetitive javascript felt clunky, so I'm ...

javascriptcssonclick

When a dropdown menu is clicked, the scrollbar magically vanishes

import { signIn, signOut, useSession } from "next-auth/react"; import { buttonVariants } from "../ui/button"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownM ...

cssreactjsnext.js

Use the ng-repeat directive to display multiple items and let the user input a quantity for each item. Then, in AngularJs, gather all the form data, including the repeated items and their quantities, and

Hey there! I have a question related to AngularJs: How can I repeat pre-selected items using (ng-repeat) and allow users to enter a quantity for each item in a subsequent step, then submit all the form data? I'm wondering if adding $index to the repe ...

javascripthtmlangularjs

Contrasting onevent with addEventListener

After studying various DOM events, I attempted to implement the 'blur' event on the HTML body. My first attempt was with onblur document.body.onblur = () => { dosomething(); } and I also tried using AddEventListener document.body.addEven ...

javascripthtmldom

What is the best way to accentuate a column in an HTML table using Bootstrap?

I have implemented a table in my bootstrap project and I am looking to group columns together. Are there any built-in options in bootstrap that allow for this? While I am open to writing custom CSS if necessary, I would prefer to use a native feature in bo ...

htmlcsstwitter-bootstrap