How to change Bootstrap 3 code?

Question

Is it possible for me to edit some part of a Bootstrap CSS code? If so, how?

Answer 1

It is possible yes. Just open the code in your preferred editor and have it seen.

Every developer has their favorite IDE, but you can even change in the notepad in an emergency (or if you are masochistic).

And since the source repository for boostrap is Github, you can also create an account there, make a Fork project and edit your copy online. The source address is this:

https://github.com/twbs/bootstrap

Answer 2

You can change the bootstrap code via some editor (IDE) of your choice.

But note that there are two files in each subfolder of Bootstrap (for example, bootstrap.js and bootstrap.min.js), which are the code files and their minified versions, that is, lighter.

You will usually use the minified version in your code script, but it is difficult to modify. One advice is to change only the normal version and use some service to minify the code and use it smoothly.

Some examples:

https://javascript-minifier.com/

http://www.minifier.org/

Hugs and good codes!

Answer 3

Yes you can although personally I 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 creating CSS or JS the part. Take 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>
<script src="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>
<script src="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>

Answer 4

Yes it is possible to edit the code. But there are many classes dependent on each other, a fit in the wrong place can mismark your entire site. My suggestion is to learn how to customize your Bootstrap. For this, you can use the official page: http://getbootstrap.com/customize/ or try other sites that allow you to quickly view: http://bootstrap-live-customizer.com/. In the latter, after customizing, just download the file . CSS or . LESS.