React in Style: an introduction to Bootstrap
If you’re anything like me, having to style a web app can be a total drag. Styling can be an extremely tedious and daunting task that most developers push off until the absolute end. With React-Bootstrap, we can use a multitude of components to help move the process along much faster.
Getting Started
Let’s start by creating a new react app.
Next we need to open our app and install react-bootstrap.
Now we can start our server and see the standard React application.
Lastly, we import the react-bootstrap stylesheet in our app so our components render nicely.
Importing Components
Bootstrap comes with a ton of cool and useful components that we can use to bring some pizazz to our web app. We can access these components by importing them into our app. There are two ways to import components: import the individual component or import the entire library.
Out of the two import methods, it is recommended to import the components individually, but for my example I will be importing the entire library.
Basic Components
In this section, I’ll be going over some of the basic Bootstrap components that’ll help you jumpstart your styling skills.
Button
Let’s start with some simple buttons. Bootstrap makes it really easy to style buttons with it’s Button component. Using the prop “variant”, you can style buttons by changing it’s value. There are nine different variant styles to choose from, plus those nine styles in an outline version. You can also change the size of the button with the “size” property to either “lg” for large and “sm” for small. Another button property you can add is “block” which will make the button fill the width of its parent component.
Card
Next, we have the Card component. The Card component has a lot of options for you to work with, which is great! We’ll start with images. We can work with card images by using Card.Img. Within this component, like any other image tag, we provide the src for the image. In react-bootstrap, we can change the location of the image on the card by specifying “top” or “bottom” with the variant prop. Unfortunately we are limited to those two options, however, you can have images on the left or right side by using Rows and Cols within your card. Another component we can use is Card.Body. This provides us with some padded space to insert content. I’m my example, I have used a Card.Title and Card.Text within my first card body and a Card.Link within my second body. With Title and Text, all you need to provide is some text. For Link, you also need text as well as an href prop. If you want to list some content within you card, you can do so by using a ListGroup with ListGroupItems. The ListGroup, however, cannot be with the Card.Body component.
Form
Moving on, react-bootstrap makes creating and styling forms a breeze! We first start with our Form component and within that we use the Form.Group component which will provide our form with proper spacing and accessibility to other Form components. We can use Form.Label for labels and Form.Control as the input. Like with our other components, we can change the size of the Control with the size prop. If you want to change the way you input your data, you can do that with “as” and specifying “input”, “textarea”, “select”, or “elementType”. For a submit button, you can use the Button component with a type of “submit”. Another useful Form component is Form.File. This allows the user to upload a file with ease. For the basic file upload, we can just use the Form.File component with a label prop.
Modal
The last react-bootstrap component we will talk about today is Modal. Modals are usually pretty daunting to me, but Bootstrap makes it a piece of cake! First we need to start with something that will trigger the modal to open. In this case, I’ll be using a Button. Within that component, you need to use an event handler that will open the modal once triggered. Since I’m using a button, I’ll be using an onClick event handler. Next, we can start making our Modal by using the Modal component. Within this, we can provide the modal with the sub-components Modal.Header, Modal.Body, and Modal.Footer. Similar to our previous components, we can incorporate a lot within these sub-components, like a Title in the header, some basic text in the body, and Buttons in the Footer. The last thing we need is a trigger to close our Modal. In my example, I have used the two buttons’ onClick event handler to trigger the close. I also used the Modal’s onHide event handler on line 16 to close the component, which will close the modal when you click outside of it.
React-Bootstrap is a great way to style your app quickly and easily. While you may not have as much free range as custom CSS, the simplicity makes the tedious process of styling much faster. The examples I went over today are just a few of the many components React-Bootstrap provides us with. Feel free to explore the rest of them in the link down below. Happy coding!
