Using bootstrap classes and css styles together in next.js
Hello, in this post I am going to show you how you can combine styles from an external sheet and bootstrap classes in Next.js.
Please note, I am assuming that you have setup your external stylesheet and also setup a way to use bootstrap in your next.js application. If you haven't then read our How to use external stylesheets in next.js and Adding bootstrap to next.js website posts
To apply styles from an external stylesheet and bootstrap classes to the same jsx tag, you just have to add the bootstrap class or classes within the string literals as shown below
<div className={`d-flex justify-content-center ${styles.row_background}`}>
</div>
From the code above d-flex and justify-content-center are bootstrap classes while row_background is a style from an external stylesheet
Conclusion
Although bootstrap framework is awesome and helps to greatly reduce the amount of code you end up writing, it can't do evertything. There are still some sections of your website where you must add css inorder to get the specifc design you want. In this post i have been able to show you can combine the bootstrap classes with the css styles. As always thanks for reading. If you have any questions concerning the post then leave a comment down below and i'll answer as quickly as i can