Bootstrap UI - Nautobot Documentation

Skip to content

# Developing the Bootstrap 3 UI

## Introduction

Nautobot's current primary UI is based on Bootstrap 3. Since Nautobot 2.1.0, this UI has used a Nautobot-specific custom Bootstrap theme built in the `nautobot-bootstrap` GitHub repository and then customized further in the main `nautobot` GitHub repository.

## Theme Files

- `nautobot/project-static/bootstrap-3.4.1-dist/css/` - the base Nautobot-themed Bootstrap CSS definitions, directly as compiled from `nautobot-bootstrap`. These should never be edited manually, only recompiled from `nautobot-bootstrap` and copied as-is into `nautobot`.
- `nautobot/project-static/css/base.css` - Overrides and extensions of the base CSS theme for Nautobot. Can be edited as needed.
- `nautobot/project-static/css/dark.css` - Additional overrides and extensions specifically for the "dark mode" theme. Can be edited as needed.

## Previewing the theme

When `settings.DEBUG` is set to `True`, an authenticated Nautobot user can access the URL `/theme-preview/` to retrieve a templated view that showcases many of the different Nautobot UI elements. While not necessarily comprehensive, this view is designed to provide an overview of the current theme more conveniently than clicking around to various specific pages in the UI. Feel free to add more example content into this view as needed.