Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,205,687 members, 7,993,417 topics. Date: Monday, 04 November 2024 at 12:03 PM

How Do I Change The Color Of A Grid In Bootstrap - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / How Do I Change The Color Of A Grid In Bootstrap (5767 Views)

Professional Html,bootstrap,php,java,json Web Deloper. Pay After Service! / Php, CSS, HTML, Javascript, Jquery, Bootstrap, Tutorial Via Whatsapp / Learn Wordpress, Angular Js And Bootstrap For Web Design/development (2) (3) (4)

(1) (Reply) (Go Down)

How Do I Change The Color Of A Grid In Bootstrap by Thirdwrist(m): 1:53am On Mar 05, 2016
I created a custom style sheet and added this line of CSS, to change the color of the grids but no way.

CUSTOM.CSS >



col-md-3{
color:#f8f8f8;
}
Re: How Do I Change The Color Of A Grid In Bootstrap by sinkernet: 7:20am On Mar 05, 2016
col-md-3 is a class, so u should dot b4 it:

.col-md-3 {...}

And don't forget that you'll sometimes need to add:
!important to your rules
Re: How Do I Change The Color Of A Grid In Bootstrap by AnthonyAk(m): 7:45am On Mar 05, 2016
color only changes the font color not the color of the grid itself. to style a grid you have to give it background color and a height

i.e

.col-md-3{
background-color:red;
height:1000px;
}
Re: How Do I Change The Color Of A Grid In Bootstrap by maekhel(m): 8:32am On Mar 05, 2016
In addition to what @AnthonyAk said, it is advisable to create your custom class, something like:
<div class="col-md-3 sidebar">
Then you can style the sidebar class.
.sidebar {

}
Re: How Do I Change The Color Of A Grid In Bootstrap by Nobody: 3:14pm On Mar 05, 2016
You can do that by learning HTML again.
Re: How Do I Change The Color Of A Grid In Bootstrap by AnthonyAk(m): 7:02pm On Mar 05, 2016
why would you want to color a grid tho
Re: How Do I Change The Color Of A Grid In Bootstrap by pythonleet: 7:22pm On Mar 05, 2016
Thirdwrist:
I created a custom style sheet and added this line of CSS, to change the color of the grids but no way.

CUSTOM.CSS >



col-md-3{
color:#f8f8f8;
}

Don't ever manipulate bootstrap class, directly. Define your custom classes with different names and apply them to any element, in your case:
.green-grid {
background-color: green;
color: white;
}

And in your HTML:

<div class="col-md-5 col-md-offset-7 green-grid">A green DIV</div>

NOTE: Make sure your custom style rule is after bootstrap style, and you might need to add the !important rule, tho not necessary for bootstrap.
Re: How Do I Change The Color Of A Grid In Bootstrap by Onyiibazz: 8:27am On Mar 06, 2016
pythonleet:


Don't ever manipulate bootstrap class, directly. Define your custom classes with different names and apply them to any element, in your case:


And in your HTML:



NOTE: Make sure your custom style rule is after bootstrap style, and you might need to add the !important rule, tho not necessary for bootstrap.

Baba, there is this bootstrap plugin that people use on sublimeText, such that if you just type for example .container and press space, the editor automatically changes it <div class = "container"></div>
Please do you know anything about that?
Cc Thirdwrist, anthonyak, others
Re: How Do I Change The Color Of A Grid In Bootstrap by maekhel(m): 1:03pm On Mar 06, 2016
Onyiibazz:


Baba, there is this bootstrap plugin that people use on sublimeText, such that if you just type for example .container and press space, the editor automatically changes it <div class = "container"></div>
Please do you know anything about that?
Cc Thirdwrist, anthonyak, others
If you have sublime text package control, you search for it on sublime text repo by pressing Ctrl+shift+p then install then start typing bootstrap and select the bootstrap 3 snippets.
Re: How Do I Change The Color Of A Grid In Bootstrap by jogboms(m): 1:35pm On Mar 06, 2016
The SublimeText plugin is called emmet.
Re: How Do I Change The Color Of A Grid In Bootstrap by AnthonyAk(m): 4:06pm On Mar 06, 2016
Onyiibazz:


Baba, there is this bootstrap plugin that people use on sublimeText, such that if you just type for example .container and press space, the editor automatically changes it <div class = "container"></div>
Please do you know anything about that?
Cc Thirdwrist, anthonyak, others

Bootstrap is easy enough to learn. i mean the rule of thumb is all Rows go inside containers and the columns go inside the rows. Once you have typed it out a couple times it become second nature.
Re: How Do I Change The Color Of A Grid In Bootstrap by Onyiibazz: 11:43am On Mar 11, 2016
maekhel:

If you have sublime text package control, you search for it on sublime text repo by pressing Ctrl+shift+p then install then start typing bootstrap and select the bootstrap 3 snippets.
Pls, this sublime text package control, is it an entirely different package i'm supposed to download? Or does it come with sublime text because i cant seems to find it. Please forgive my ignorance.
Re: How Do I Change The Color Of A Grid In Bootstrap by maekhel(m): 12:32pm On Mar 11, 2016
Onyiibazz:

Pls, this sublime text package control, is it an entirely different package i'm supposed to download? Or does it come with sublime text because i cant seems to find it. Please forgive my ignorance.
It doesn't come with sublime by default. You have to download it. Follow the instructions here: https://packagecontrol.io/installation
Re: How Do I Change The Color Of A Grid In Bootstrap by Standing5(m): 7:11pm On Mar 11, 2016
AnthonyAk:
why would you want to color a grid tho
This is the greatest mistake people make about bootstrap. You are to build on it and not use it a final product.
Re: How Do I Change The Color Of A Grid In Bootstrap by guente02(m): 10:23pm On Mar 11, 2016
Im actually about to head towards learning css frameworks. Glad to have picked one or two from the little here.
Please at what point should i learn any css preprocessor?
Re: How Do I Change The Color Of A Grid In Bootstrap by Nobody: 7:18am On Mar 12, 2016
guente02:
Im actually about to head towards learning css frameworks. Glad to have picked one or two from the little here.
Please at what point should i learn any css preprocessor?

When you're 90% good with CSS. The preprocessors should be an advantage not a crouching stick.
Re: How Do I Change The Color Of A Grid In Bootstrap by SambisaKing: 8:23am On Mar 12, 2016
maekhel:
In addition to what @AnthonyAk said, it is advisable to create your custom class, something like:
<div class="col-md-3 sidebar">
Then you can style the sidebar class.
.sidebar {

}

You got it right.
This is the best solution, give the class a custom name and style in CSS because all your "col-md-3" must not have the same properties.

1 Like

Re: How Do I Change The Color Of A Grid In Bootstrap by guente02(m): 11:14am On Mar 12, 2016
DanielTheGeek:


When you're 90% good with CSS. The preprocessors should be an advantage not a crouching stick.
What do i have to command to be 90% good?
Re: How Do I Change The Color Of A Grid In Bootstrap by Nobody: 12:51pm On Mar 12, 2016
guente02:

What do i have to command to be 90% good?

knowledge of all CSS rules, CSS Media Queries, Pseudo selectors, CSS animations and tricks.
Re: How Do I Change The Color Of A Grid In Bootstrap by guente02(m): 3:45pm On Mar 12, 2016
DanielTheGeek:


knowledge of all CSS rules, CSS Media Queries, Pseudo selectors, CSS animations and tricks.
Sounds like 98% to me though.
Thanks a bunch. I appreciate that shii.

1 Like

Re: How Do I Change The Color Of A Grid In Bootstrap by Nobody: 7:41pm On Mar 12, 2016
guente02:

Sounds like 98% to me though.
Thanks a bunch. I appreciate that shii.

You're welcome Guente02.
Re: How Do I Change The Color Of A Grid In Bootstrap by Anmich: 4:01pm On Mar 13, 2016
The package is named Emmet. It's also available for Brackets text editor which I prefer to sublime

(1) (Reply)

JSP Web Development / Is It Difficult To Build A Forum Like Nairaland? / My Just Completed Android E-voting App

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 28
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.