How to access bootstrap css?

Asked

Viewed 631 times

1

I’m using a bootstrap navigation bar and would like to increase the space between the buttons and change their colors by editing files from an external file, but I don’t know where I can get his css code (it’s my first time using bootstrap)...
HTML is like this:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <head>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">titulo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item ">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">

          <button class="btn btn-outline-success my-2 my- sm-0" type="submit">BOTAOA</button>

          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">BOTAOB</button>
        </form>
      </div>
    </nav>
  </head>
  <body>

  </body>

</html>
css html5 bootstrap-4

  • It usually stays inside the bootstrap folder, but precisely in the css folder and in the bootstrap.min.css or bootstrap.css. It depends on which of the two files you are calling.

  • is that I didn’t download anything to use, I just used the reference link... I’ll try to download the files and see if it works

  • But I didn’t get it right. All these changes you quoted, you can make using bootstrap classes.

2 answers

1

Create a 

<div class="unique-section-name"></div>

around the code you want to change the css properties present in bootstrap.

.unique-section-name .bootstrap-class { css here }

So you change the bootstrap css properties in a section of your system(Unique-Section-name) without changing in others.

EDIT1: To know which class you should change, in theory, you should consult the official documentation of the bootstrap, but, probably will be easier by your browser’s Inspect.

Note: Bootstrap was useful, as was jQuery, in moments of humanity in which most of us were not yet alive. If you are learning and not giving maintenance to an older system, don’t use any of them, currently CSS and JS versions give you tools to handle web pages in extremely effective ways.

Obs2: This pattern of isolating a class in a 'section' of your system using a single class for this section, is the basis of local css (isolated component) in frameworks like angular, Vue and libraries like React.

0


It’s easier for you to "create" your own class than to change the Bootstrap class, and if you already have the knowledge to change it, you can create yours. For you to change, you would need to have the files downloaded inside your project folder, which would slow it down, it is better to leave by Cdn anyway.

To create your class, simply create a css file (I usually call it custom.css), look for the class you’d like to change within the bootstrap.css file (it’s harder to find in the bootstrap.min.css file), copy it whole, play it in custom.css and make the changes, name change, colors, padding, just like I did here.

meu código

Then in case I took the btn-Primary that is blue, and I created a btn-box that is orange. Thanks, I hope to have helped, any doubt comments here

Browser other questions tagged css html5 bootstrap-4

You are not signed in. Login or sign up in order to post.