[CSS][Bootstrap] Themes Bootswatch
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-sassIf 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.
