[CSS][Bootstrap] Themes Bootswatch

Andrew Samchuk
Nov 2 · 2 min read

Let’s look at an example of topics on React.

Firstly we created new project with create-react-app. Look here and here.

Installation

Then install dependencies:

npm install react-bootstrap
npm install bootswatch
npm install node-sass

If you do not want to use react-bootstrap then use just bootstrap. You can also pay attention to reactstrap.

You can find out more about bootswatch here.

We will also use Sass. You need to install a specific (node-sass)plugin to use it.

Connection

Now let’s connect the styles:

@import "~bootswatch/dist/[theme]/variables";@import "~bootstrap/scss/bootstrap";@import "~bootswatch/dist/[theme]/bootswatch";

Instead of [theme] you have to figure out the theme you want. You can see all the topics here.

Make sure to import Bootstrap’s bootstrap.scss in between _variables.scss and _bootswatch.scss!


There is another way to connect with a CDN.

The connection is made in a file index.html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/sketchy/bootstrap.min.css">

Word sketchy is the name of the theme.

You can see all the topics and their connections here.

Usage

Now we will just use the Botstrap and Bootswatch will pull up automatically.

import React, { Component } from 'react';
import
{ Container, Row, Col, Alert } from 'react-bootstrap';
class App extends Component {
render() {
<Container>
<Row>
<Col>
<Alert variant={'primary'}>
This is a 'primary' alert.
</Alert>
</Col>
</Row>
</Container>
}
}

Customization

Bootswatch is open source and you’re welcome to modify the themes.

Each theme consists of two SASS files. _variables.scss, which is included by default in Bootstrap, allows you to customize the settings. _bootswatch.scss introduces more extensive structural changes.

Check out the Help page for more details on building your own theme.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade