Change bootstrap default theme

Asked

Viewed 1,905 times

1

Good morning, I’m studying Bootstrap and would like to change the default theme of it. I have the following navBar: inserir a descrição da imagem aqui

I want her to have the following format: inserir a descrição da imagem aqui

I know I have to change the default theme in custom-Theme.scss, I know I can do it right in CSS but since I’m studying Bootstrap, I wanted to know how to change the default theme. Grateful.

css twitter-bootstrap

  • As far as I know you only change the default Bootstrap theme by changing the css of it as you said.

1 answer

0


Let’s go in pieces.

This is the default CSS of Bootstrap 4 https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css

But let’s assume that you want to change the primary color to purple for example. You’ll need to enter this link with the .css official, of the one Ctrl+F and search by class name you want --primary.

:root {
  --primary: #007bff;
}

Copy these styles, create a file .css new and glue these style on .css for example override.css and saves your file in the css folder, then vc indexes that file .css after the Bootstrap css to overwrite the class, or if you are not using the .css Bootstrap index only your override.css within the tag <head> of your document in this way 

<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/override.css">
</head>
<div class="row">
    <p>Lorem, ipsum dolor.</p>
</div>

The ideal is that you do not change the original Bootstrap classes. Create your own . CSS and inside it will overwrite the things you would like to change.

See an example changing the background of NavBar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    .bg-light {
        background-color: #8a2be2 !important;
    }
</style>
</head>
<body>
    
    <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="#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 active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Notice that I just needed to change the class value .bg-light for the purple and ready, but as said do not do this in the original file, do it in override.

Browser other questions tagged css twitter-bootstrap

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