Is it possible for me to edit some of a Bootstrap CSS code in my taste? If so, how?
Is it possible for me to edit some of a Bootstrap CSS code in my taste? If so, how?
Yes, it is possible. Just open the code in your preferred editor and have it checked out.
Every developer has their preferred IDE, but you can even change it to notepad in an emergency (or if it's a masochist).
And since the source repository for the boostrap is Github, you can also create an account there, make a fork project and edit your copy online. The source address is this:
You can change the bootstrap code through some editor (IDE) of your choice.
But be aware that there are two files in each Bootstrap subfolder (for example, bootstrap.js and bootstrap.min.js), which are code files and their minified, or lighter, versions.
You will usually use the mined version in your code script, but it is difficult to modify. One advice is to just change the normal version and use some service to minify the code and use it without problems.
Some examples:
Hugs and good codes!
Yes you can though I personally do not recommend editing the bootstrap code directly, because if you need to update the version for example, you will have to change everything again, I recommend customizing by creating CSS or JS the part. Here's an example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>Cores Padrões</h2>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-danger">Danger</button>
/**ALTERANDO AS CORES PADRÕES DO BOOTSTRAP COM ARQUIVO CSS PERSONALIZADO**/
.btn.btn-primary,
.btn.btn-primary:hover{
background-color:green;
border-color:green;
}
.btn.btn-default,
.btn.btn-default:hover{
background-color:blue;
border-color:blue;
color:#fff;
}
.btn.btn-danger,
.btn.btn-danger:hover{
background-color:orange;
border-color:orange;
}
/**CRIANDO CLASSES PERSONALIZADAS**/
.btn.btn-muted,
.btn.btn-muted:hover{
background-color:gray;
border-color:gray;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h2>Cores Personalizadas</h2>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-default">Default</button>
<button class="btn btn-danger">Danger</button>
<h2>Classes personalizadas</h2>
<button class="btn btn-primary btn-muted">Primary</button>
Yes you can edit the code. But there are many classes dependent on each other, an adjustment in the wrong place can de-characterize your entire site. My suggestion is to learn how to customize your Bootstrap. To do so, you can use the official link page or try other sites that allow you to quickly view: link . In the latter, after customizing, just download the .CSS or .LESS file.