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}`}>

From the code above d-flex and justify-content-center are bootstrap classes while row_background is a style from an external stylesheet


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


Hello, my name is Abubakar Zakari. Am a budding fullstack developer from Nigeria who loves developing softwares and learning new frameworks and langauges.


Select image

No comment yet




Frontend Development |Backend Development |Full Website Development |Bootstrap Website upgrades | Website Debbugging | Website Hosting & deployment


Interested in hiring me or collaborating with me on a project, click on any of the links below to get my social media handle

Or contact me via Tel: (+234)-806-225-7480 | Email:
Privacy Policy

By using our website,
you agree that devmaesters can store cookies on your device and disclose information in accordance with our privacy policy.