[Staging] Como instalar e utilizar o Bootstrap via npm

Instalar Bootstrap via npm e alterar suas variáveis é mais simples do que você imagina. Nesse artigo você veremos como é feita a instalação, configuração e sobrescrita das variáveis do Bootstrap via npm. Vamos aprender como deixar seu documento mais leve e organizado, “trazendo” apenas o necessário do Bootstrap.

Curso Flask - Fundamentos

Conhecer o curso

Porque fazer o download é melhor?

Ao fazer download do Bootstrap teremos mais liberdade na hora de utilizar seus componentes e também nos possibilita alterar as variáveis da maneira que for necessário, além disso, a página fica mais leve trazendo apenas os componentes que forem utilizados, fazendo assim com que sua página fique mais rápida.

Como será o exemplo

Então vamos colocar a mão na massa! A imagem abaixo mostra o que vamos fazer. Eu peguei alguns componentes do próprio site do Bootstrap que vamos utilizar apenas como exemplo para conseguirmos aplicar as alterações personalizadas que vamos fazer, você pode escolher qualquer componente do site, eu escolhi: navbar, button e alert. Ao longo desse artigo vamos escrever o código necessário para que a página fica desta maneira:

exemplo utilizado bootstrap via npm

Lembrando que todo o código fonte deste projeto está disponível em um repositorio no GitHub.

Instalando as dependências

Para fazer isso você irá precisar do Node.js instalado na sua máquina, ele é uma ferramenta gratuita e bem simples de fazer o download, temos um artigo explicando passo a passo como é feita a instalação do Node.js.

Após a instalação do Node.js crie uma pasta onde preferir e abra com o editor de código fonte ou IDE de sua preferência, eu irei utilizar o Visual Studio Code.

Iniciando package.json

Vamos iniciar criando um arquivo package.json para salvarmos nossas dependências conforme vamos instalando o que for preciso, para isso vamos executar o seguinte comando no terminal:

npm init -y

O comando npm init serve para iniciarmos o package.json, já a flag -y é usada para criar o arquivo de forma padrão.

Instalação node-sass e Bootstrap

A partir de agora tudo que instalarmos ficará salvo no arquivo package.json. Agora vamos instalar primeiro o Sass e em seguida Bootstrap com os seguintes comandos:

npm install node-sass
npm install bootstrap

Feito isso suas pastas devem ficar dessa forma:

exemplo pastas após instalação bootstrap

Automaticamente é criada uma pasta chamada node_modules, nessa pasta é onde ficam os pacotes instalados localmente via npm, sempre que for instalado um pacote no seu projeto essa pasta será criada, dentro dessa dela é onde estão os pacotes que acabamos de instalar, node-sass e Bootstrap, não vamos alterar nada na node_modules não se preocupe, ela irá servir apenas para importação de nossos arquivos, você irá entender melhor mais à frente.

Iniciando HTML

Agora vamos criar um arquivo HTML, vamos chama-lo de index.html, nele vamos adicionar os componentes do Bootstrap:

<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap + npm</title>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-light" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>
      </header>
      <main>
        <section class="container d-flex justify-content-center mt-5">
            <button type="button" class="btn btn-primary m-2">Primary</button>
            <button type="button" class="btn btn-secondary m-2">Secondary</button>
            <button type="button" class="btn btn-success m-2">Success</button>
            <button type="button" class="btn btn-danger m-2">Danger</button>
            <button type="button" class="btn btn-warning m-2">Warning</button>
            <button type="button" class="btn btn-info m-2">Info</button>
            <button type="button" class="btn btn-light m-2">Light</button>
            <button type="button" class="btn btn-dark m-2">Dark</button>
        </section>
        <section class="container text-center mt-5">
                 <div class="alert alert-primary" role="alert">
                    A simple primary alert—check it out!
                </div>
                <div class="alert alert-secondary" role="alert">
                    A simple secondary alert—check it out!
                </div>
                <div class="alert alert-success" role="alert">
                    A simple success alert—check it out!
                </div>
                <div class="alert alert-danger" role="alert">
                    A simple danger alert—check it out!
                </div>
                <div class="alert alert-warning" role="alert">
                    A simple warning alert—check it out!
                </div>
                <div class="alert alert-info" role="alert">
                    A simple info alert—check it out!
                </div>
                <div class="alert alert-dark" role="alert">
                    A simple dark alert—check it out!
                </div>
        </section>
      </main>
    </body>
</html>

Organizando pastas

Para manter a organização criaremos uma pasta onde ficará o código de estilização, alteração de variáveis e as impostações necessárias do Bootstrap, para esta pasta vamos dar o nome de src. Dentro dessa pasta, vamos criar três arquivos: _components.scss, _import.scss e style.scss.

Para manter a organização e a sepração das responsabilidades de cada arquivo, queremos que apenas um arquivo gere o style.css principal, o underscore na frente dos arquivos _components.scss e _import.scss serve para informar ao Sass que não deve ser gerado um arquivo CSS a partir desses arquivos, ou seja, eles servirão apenas para serem importados dentro do nosso arquivo principal que é o style.scss.

exemplo pasta para organização

Importando componentes

O que faremos com esses arquivos é o seguinte, no _components.scss vamos trazer apenas os componentes necessários para o funcionamento da página. No nosso exemplo temos três componentes do Bootstrap: navbar, button e alert. Para trazer esses componentes para nossa aplicação utilizaremos o comando @import da seguinte maneira @import “caminho-do-arquivo";.

Agora coloque as importações necessárias no arquivo _components.scss como no exemplo abaixo:

@import "../node_modules/bootstrap/scss/navbar";
@import "../node_modules/bootstrap/scss/buttons";
@import "../node_modules/bootstrap/scss/alert";

Já no arquivo _import.scss chamamos os componentes fundamentais do Bootstrap que necessitam estar presentes para o funcionamento correto do framework, desta forma:

// 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Sobrescreva variáveis aqui

// 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// 4. Inclua os estilos conforme o necessário
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em  `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

No style.scss é onde iremos centralizar tudo, então nele iremos realizar a importação dos arquivos _components.scss e _import.scss. Essa separação é para nos dar mais organização e facilidade na hora da manutenção no código.

Então, o arquivo style.scss irá ficar da seguinte maneira:

@import "import.scss";
@import "components";

Uma observação: tenha sempre bastante cuidado na hora de fazer o imports do Bootstrap para sua aplicação, pois ele necessita estar nesta ordem que aparece nos códigos, caso contrário seu código dará erro. Tudo isso se encontra na documentação oficial do Bootstrap.

Agora ao abrir o arquivo index.html no navegador a seguinte página será exibida:

Veja que a página se encontra ainda sem as estilizações do Bootstrap, isso acontece porque ainda não linkamos o Bootstrap na nossa página, até porque ainda não temos o arquivo CSS gerado a partir de nossos arquivos Sass. Lembra quando falamos que apenas um arquivo irá gerar o CSS principal? Vamos ver como gerar esse arquivo.

Gerando CSS

Este arquivo CSS será gerado automaticamente ao executarmos o seguinte comando no terminal:

node-sass src/style.scss src/style.css

Esse comando faz com que seu arquivo style.scss dentro da pasta src gere um arquivo style.css dentro da pasta src, bem tranquilo. É esse arquivo CSS gerado que iremos usar em nosso HTML.

<link rel="stylesheet" href="src/style.css">

Lembre-se sempre de colocar o caminho correto, assim evitamos erros em nosso projeto.

Se você seguiu todos os passos corretamente, ao salvar as atualizações já conseguimos ver nossa página do jeito que queríamos inicialmente.

Curso CSS - Sass

Conhecer o curso

Automatizando Sass

Toda alteração feita em nossos estilos teremos que rodar novamente o comando node-sass src/style.scss src/style.css, isso se tornaria muito cansativo e completamente improdutivo quando queremos fazer várias alterações. Mas podemos automatizar esse script colocando a flag --watch no comando, isso irá deixar o Sass complilar as alterações de forma automática. Basta fazer dessa forma.

node-sass --watch src/style.scss src/style.css

Alterando variáveis do Bootstrap

Agora vamos alterar as variáveis! Para isso precisamos nos atentar novamente ao que a documentação do Bootstrap pede, precisamos colocar em um local específico nossas alterações, essas alterações serão feitas no arquivo _import.scss, logo abaixo da importação das funções e antes das importações de estilizações padrões do Bootstrap, inclusive eu já deixei um comentário informando exatamente onde as nossas variáveis devem ser adicionadas.

Suponha que você queira mudar a cor primária do Bootstrap para vermelho, é bem simples! Basta no local correto definir que a váriavel primary irá receber o valor red, da seguinte maneira:

// 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// Insira as Alterações Aqui !
$primary: red;  // alterando cor primária para vermelho

// 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

//  4. Inclua os estilos conforme o necessário
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em  `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

Salve as alterações e olhe novamente sua página, tudo que estava com cor primária padrão do Bootstrap (azul) agora está com a cor que declaramos. Assim temos mais liberdade para criarmos layouts do nosso jeito. Outro exemplo são os tamanhos das margens que vão de 1 ao 5 como padrão. Podemos adicionar nova medidas como 6, 7, 8. Isso serve para medidas como padding, border, text-size, vai depender da sua necessidade, vou acrescentar o valor de margem 6 e aplicar em todos os botões, vamos ver como fica.

Para isso vamos novamente editar o arquivo _import.scss com o seguinte código:

// 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// Insira as Alterações Aqui !
$primary: red;

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 5,  /*estilo adicional da margem*/
);

// 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

//  4. Inclua os estilos conforme o necessário
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em  `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

Agora que já temos a nossa nova medida podemos aplicá-la em nossa página:

<section class="container d-flex justify-content-center mt-5">
    <button type="button" class="btn btn-primary m-6">Primary</button>
    <button type="button" class="btn btn-secondary m-6">Secondary</button>
    <button type="button" class="btn btn-success m-6">Success</button>
    <button type="button" class="btn btn-danger m-6">Danger</button>
    <button type="button" class="btn btn-warning m-6">Warning</button>
    <button type="button" class="btn btn-info m-6">Info</button>
    <button type="button" class="btn btn-light m-6">Light</button>
    <button type="button" class="btn btn-dark m-6">Dark</button>
</section>

Ao salvar as alterações e então atualizar a nossa página no navegador veremos o seguinte resultado:

exemplo alterado cor e margem

Aqui vai mais uma dica. Para saber o que vamos alterar de forma correta e evitando erros, basta olhar as variáveis do Bootstrap, que estão no caminho node_modules/bootstrap/scss/_variables.scss

Organizando Arquivos

Como falamos anteriormente o foco aqui também é deixar o nosso projeto organizado, podemos fazer isso criando um arquivo apenas para as alterações personalizadas. Para fazer isso é simples, na pasta src criaremos um arquivo chamado _meusEstilos.scss, você pode dar o nome que quiser, desde que esteja com underscore na frente, e dentro desse arquivo colocaremos a estilização personalizada que fizemos.

$primary: red;

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 5,
);

Agora precisamos importar esse novo arquivo dentro do nosso arquivo _import.scss, assim como no exemplo abaixo:

// 1. Incluir funções primeiro (para conseguir manipular cor, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// Insira as Alterações Aqui !
@import "meusEstilos";   // Arquivo de estilização

// 3. Incluir o restante das estilizações do Bootstrap necessários para o funcionamento
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

//  4. Inclua os estilos conforme o necessário
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";

// 5. Opcional, inclua a API de utilitários por último para gerar classes com base no mapa Sass em  `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";

Agora qualquer personalização que fizermos no nosso arquivo _meusEstilos.scss será importada no local correto. Facilitando assim a manutenção e estilização da página. Dessa forma a página possui apenas os componentes que estão sendo utilizados, dessa maneira a mesma ficará bem mais leve e consequentemente carregará muito mais rápido.

Curso Bootstrap - Conhecendo os Utilities e Helpers

Conhecer o curso

Considerações finais

Vimos nesse artigo a instalação e configuração do Bootstrap via npm, instalamos todas as dependências necessárias com poucos comandos. Aprendemos a parte de organização dos arquivos e das pastas que facilitam muito o entendimento do código e sua manutenção. Conseguimos alterar e até mesmo criar variáveis novas, fazer com que o Sass compile automaticamente, tudo isso de forma bem simples e principalmente da maneira correta, porém se quiser aprender mais sobre esse tema, temos um direto ao ponto aqui na plataforma, o Bootstrap - Personalização e Modos de Uso

A melhor oferta da história!

Como instalar e utilizar o Bootstrap via npm

Você sabia que a TreinaWeb é a mais completa
escola para desenvolvedores do mercado?

Curso Flask - Fundamentos

Porque fazer o download é melhor?

Como será o exemplo

Instalando as dependências

Iniciando package.json

Instalação node-sass e Bootstrap

Iniciando HTML

Organizando pastas

Importando componentes

Gerando CSS

Curso CSS - Sass

Automatizando Sass

Alterando variáveis do Bootstrap

Organizando Arquivos

Curso Bootstrap - Conhecendo os Utilities e Helpers

Considerações finais

Autor(a) do artigo

Amauri Blanco Corrêa

Artigos relacionados Ver todos

Formas de se trabalhar com Bootstrap 5

Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme

Guia do framework NestJS

Guia da linguagem CSS

O que é Tailwind CSS e como instalar via CDN?

O que é NPM e como usar uma biblioteca instalada por ele

Como enviar emails com NestJS e Nodemailer

Como instalar um pacote com Composer e utilizá-lo em seu projeto PHP

Como instalar o PHP e Xdebug no Windows

Como instalar e executar o React

Como instalar e configurar o AWS CLI

Como instalar a Golang e executar nosso primeiro exemplo

A melhor oferta da história!

Como instalar e utilizar o Bootstrap via npm

Você sabia que a TreinaWeb é a mais completa escola para desenvolvedores do mercado?

Curso Flask - Fundamentos

Porque fazer o download é melhor?

Como será o exemplo

Instalando as dependências

Iniciando package.json

Instalação node-sass e Bootstrap

Iniciando HTML

Organizando pastas

Importando componentes

Gerando CSS

Curso CSS - Sass

Automatizando Sass

Alterando variáveis do Bootstrap

Organizando Arquivos

Curso Bootstrap - Conhecendo os Utilities e Helpers

Considerações finais

Autor(a) do artigo

Amauri Blanco Corrêa

Artigos relacionados Ver todos

Você sabia que a TreinaWeb é a mais completa
escola para desenvolvedores do mercado?