---
title: Customizing Bootstrap
slug: /customizing-bootstrap/
last_update:
  date: 2024-09-10T11:30:00-00:00
---

## Basic customization
:::tip
Don't forget to run `npm start` to get immediate feedback of your changes!
:::

The simplest way to customize how your JHipster application looks like is by
overriding CSS styles in `src/main/webapp/content/css/global.css`, or if you selected the Sass option, the `src/main/webapp/content/scss/global.scss` file.

Using Sass is both easier, more concise and more powerful than plain CSS because Bootstrap is also written in Sass, please refer to Bootstrap's [official documentation about theming](https://getbootstrap.com/docs/5.3/customize/sass/).

If you want to use Bootstrap [partials](https://sass-lang.com/guide/#partials) in your own `scss` files then import it like below at the beginning of your `scss` file.
For example to use the border-radius mixin:

```css
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/border-radius";
```

Make sure you import only partials and not main Sass files, otherwise you will end up generating duplicate CSS which might cause issues.

To change the default Bootstrap settings like colors, border-radius, etc., add or change the value of the property in the partial file `src/main/webapp/content/scss/_bootstrap-variables.scss`

All values defined in Bootstrap [_variables.scss](https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss) can be overwritten here.