Usando o bootstrap

Você cria um novo arquivo css, e então cria sua própria estilização, usando uma classe ou um id, dependendo do caso, e adiciona essa classe ou id ao elemento que deseja mudar

Então tudo que eu colocar nessas novas classes/id dentro do meu próprio css, vai passar por cima do bootstrap.css? Por exemplo, coloco background cor XXXX, então vai ser a cor XXXX anulando a cor que já veio do bootstrap?

sim, pode ser que algumas não "passem por cima", mas ai voce pode usar um !important no css

Exemplo:

backgound-color: #000!important

ou então aplicar com uma especifidade no css Exemplo:

.container .nav a {
    color: #000
}

mas na maioria dos casos ele já ira substituir pelo que você declarou em sua classe/id no css

Opa Paulo beleza? A solução dada pelo Lucas é super adequada, só não esquece que como o Bootstrap é feito basicamente com estilização utilizando !important, forçar essa estilização não é muito bacana pq sai do fluxo natural do CSS.

Você pode pegar um elemento do Bootstrap, ver o que não precisa nele, retirar a classe que não te importa (como por exemplo, bg-light, navbar-light, bg-dark que mudam estilos próprios do bootstrap) e substituir pelos seus estilos.

Eu particulamente faço isso, pq deixa o html mais limpo e só com o necessário, e utilizo a especificidade do CSS (mas nunca com uma tag html direto pq o Bootstrap tb tem estilização pra elas e algumas vezes e ai não vai funcionar).

Se você colocar algo assim não irá funcionar por conta da prioridade das classes do Bootstrap

<div class="bg-dark text-center text-white py-4 meu-estilo">AAAA</div>

.meu-estilo{
    color: black;
    background-color: white;
    text-align: left;
    padding: 10px 0;
}

Seus estilos não iram sobrescrever os estilos do bootstrap pois estes estão com um valor !important e mesmo que você faça isso

.meu-estilo{
    color: black !important;
    background-color: white !important;
    text-align: left !important;
    padding: 10px 0 !important;
}

Não irá funcionar pois não tem ordem de hierarquia ai saca?

Então é melhor retirar as classes bg-dark text-center text-white py-4 que não te interessam no estilo e usar apenas o meu-estilo

É uma questão de boa prática, performace e tal, mas jeito que o Lucas falou vai funcionar também :D

Bom dia, obrigado Andre e Lucas. E André, você está prestes a responder a uma das minha maiores dúvidas do html/css, que estou na luta para tirar. Você foi o mais próximo do que eu busco e não encontro. Pelo que eu entendi sobre o que você explicou, eu pego COMO É a classe do bootstrap, e passo para meu próprio css, certo? Para não ter que usar !important etc. E como faço isso? Pois quando eu tento, não é possível. Vou mostrar dois exemplos que tentei e não obtive sucesso.

Exemplo 1: -Eu abro meu index.html no browser, e dou inspecionar, para descobrir a localização da classe do elemento que eu quero mexer no bootstrap. -Feito isto, procuro a classe usando o Visual Code. Aí minha dúvida sobre esse exemplo é...Eu devo procurar a classe no bootstrap.css ou no _navbar.scss (para o caso de eu querer algo da navbar)? Se for no bootstrap.css eu devo copiar a classe, e colar no meu próprio css?

O código abaixo eu retirei do bootstrap.css .nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }

Então eu copio esse código, passo para o meu css, e modifico do jeito que quero? Ficando assim, por exemplo?

.nav { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 19999999(exemplo de modificação da maneira que desejo); margin-bottom: 0; list-style: none; }

A segunda dúvida é. Se isso que eu fiz, estiver correto, na hora de declarar a classe no html, quando eu preciso usar mais de uma classe, eu escrevo classe1. espaço classe2.? Um exemplo prático disso div class= nav. hoover. >AAAA</div Eu tirei os <> pois na hora de mandar a mensagem aqui, ele não estava aparecendo a div que fiz de exemplo

É isso? Bom dia a todos, e obrigado.

Opa bom dia chefe! Beleza?

Então, o Bootstrap se trata de uma ferramenta de criação (um framework), portanto ele possui diversas classes prontas e componentes prontos para funcionar!

Sua primeira pergunta a resposta é a seguinte: Quando você escolhe utilizar um componente do Bootstrap como uma navbar, um card de imagens, um formulário, as classes que vem neste componentes são responsáveis pela estilização DAQUELE componente do Bootstrap, ou seja, se você retirá-las você perde a estilização do bootstrap e terá que fazer na mão :(

Sobre você trocar a estilização do CSS, eu recomendo não mexer nos arquivos de estilização do proprio bootstrap! Se você quer estilizar algum componente, você deve criar um novo arquivo CSS (com qualquer nome que você quiser, igual um arquivo normal mesmo), linkar no HTML e por este arquivo estilizar suas classes!

Para estilizar a o componente "navbar" do bootstrap por exemplo você faria o seguinte:

Primeiro escolha o código que melhor se encaixa no que você quer criar! O Bootstrap tem alguns modelos pré prontos e você pode escolher o que você quer ou o mais próximo do que quer

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Você vai notar que a cor desta navbar é meio cinza claro e os links são meio preto claro! As classe responsável por esta estização são esssas navbar-light bg-light. Para descobrir isto você pode dar um inspecionar elemento em cima da navbar e procurar no cantinho o que cada classe faz (ou fazer o que fez, entrar no arquivo navbar.scss e descobrir como é o estilo).

Feito isso, digamos que você queira que esta cor de fundo seja laranja. Você terá que REMOVER essas classes da tag <nav> e adicionar uma classe SUA para estilizar no arquivo css que criou!

HTML

<nav class="navbar navbar-expand-lg MINHA-CLASSE-ESTILIZADA">
...
</nav>

CSS

.MINHA-CLASSE-ESTILIZADA{
    background-color: orange;
}

Já respondendo sua segunda questão, você coloca mais de uma classe exatamente como falou <div class="classe1 classe 2 class3 classe4 classe classe1000>AAAA

Por fim, não tem como saber só de olhar o que cada classe do bootstrap faz (pois são milhares de classes fazendo alguma coisa) mas se você tiver com tempo para entender mais sobre isso eu recomendo que use o inspecionar elemento e vá olhando no elemento o que cada classe faz. Tem um curso aqui na Alura sobre "Landing Page com Bootstrap" que a professora estiliza uma página feita com Bootstrap através de um CSS próprio, vale a pena dar uma conferida pois pode ser de grande ajuda pra ti! https://cursos.alura.com.br/course/bootstrap-landing-page

E não menos importante, o Bootstrap é uma ferramenta que utiliza CSS, HTML, JAVASCRIPT e JQUERY para funcionar. Tudo que tem lá você consegue criar manualmente escrevendo seu próprio código, ou seja, pode utilizá-lo ou não! A ideia é deixar mais rápido e simples a criação de páginas; porém, se assim como eu você gosta de fazer umas firulas no CSS, dar uns movimentos mais interessantes ao seu site recomendo que você crie seu próprio componente no HTML e estilize na mão no CSS, pois em alguns casos é melhor criar seu próprio elemento ao invés de estilizar o do Bootstrap :D

Espero ter ajudado! No fórum é complicado responder TUUUUDO mas pode perguntar que enquanto eu tiver respostas tento ajudar :D

Muito obrigado! Me ajudou bastante, inclusive irei salvar todas essas mensagens.

Ah amigo fico feliz que tenha ajudado! Inclusive, sobre sua questão dos códigos aqui não aparecerem formatados assim <div></div> você pode resolver com o esquema de formatação aqui da Alura que é este:

How to format code

É possível criar blocos de código adicionando três backticks (```) antes e depois do código
Para escapar a formatação, utilize crases `dessa _forma_`
Serão exibidas apenas tags HTML e XML que estiverem entre ``

Formatação básica

**negrito**
*itálico*
~~riscado (Strikethrough)~~

Como formatar links

<http://google.com>
[Google](http://google.com)

Só clicar em "Fomatação" ali do lado direito superior que terá acesso a isso :D `