How to add a Bootstrap CSS for Your Magento 2 Theme

This tutorial is a long waiting one. I've been asked to show how to add a bootstrap into Magento 2 for ages. Finally, I've made it and happy to share it with you. Hope you like it. Hit subscribe to support my free tutorials.
Check my online course Payment Integration in Magento 2: www.maxpronko....
Subscribe to my channel for more videos!
--
Connect with me over the social channels:
Twitter: / max_pronko
Website: www.maxpronko.com
Instagram: / maxpronko
Medium: / maxpronko
Facebook: / maxpronkocom
Business Enquiries: www.pronkocons...

[@mawizshahab2416]

Thanks a lot Max! ♥️

[@MaxPronko]

You are welcome

[@bohdanbatsenko4843]

Please what is the difference adding css files into - Magento_Theme/web/css and directly into - web/css? Thanx

[@tantivit]

Many thanks for the video!

[@MaxPronko]

Thanks for watching!

[@bbaros77]

Thank your tutorials!

[@MaxPronko]

Thanks for watching!

[@perfectwebsolutions]

if you only need to add css compiled then why you need to download the source? rather than downloading the Compiled CSS and JS?

[@MaxPronko]

This was my decision :)

[@perfectwebsolutions]

@@MaxPronko oh Ok, I thought you are going to show how to use sass with magneto as we know Magento already support .less but the bootstrap source is in .scss format.

[@meghvankawala3563]

I am using luma theme and when I add bootstrap.css to my theme, bootstrap css is applied to footer section also and it messed up the footer. I only want to apply bootstrap css only content section (not header and footer).

[@NishaChar786]

Awesome tutorial

[@NishaChar786]

Can you teach KO js

[@andresamartins26]

@@NishaChar786 There is a guy who has an amazing Magento 2 KnockoutJS course. You can have a trial for free on his website - www.mage2.tv. I was able to create my first component right after the lessons - github.com/andresams/magento2-cart-popup.

[@williamengbjerg]

@Max Could you make one with tailwind css as well? Would be pretty cool. Thx.

[@MaxPronko]

I definitely have to try with tailwind css and make a video. Thanks

[@onetapmediaofficial]

Thanks, Max

[@abautixta]

cool Max, could you make one with tailwind css?

[@MaxPronko]

I definitely could.

[@alangoldberg4723]

What's the surprise at the end?

[@MaxPronko]

Have a look the full video

[@mohamedmekkaoui3277]

Thank you Max, I've been trying to order my custom.css after style-l.css and style-m.css as per client demand, I will try using head.additional but is it a good idea in term of best practices ?

[@MaxPronko]

Mohamed Mekkaoui best practice is to have all your custom styles included into style-l.css and style-m.css, for this you would have to write tour custom styles in less files

[@mohamedmekkaoui3277]

@@MaxPronko Thank you! yes Ideally, I forgot to mention that this custom.css is minified ... the battle of client satisfaction vs best practices may begin

[@naimali6385]

Thank you.

[@DesiTonyFaimly]

best videos

[@pegatino]

After doing this it gives me an error in the CLI , ' There are no commands defined in the "c" namespace. ' ! Why?

[@MaxPronko]

Try “cache” instead of c. Maybe there is some misconfiguration.

[@reenakotadiya819]

and bootstrap JS ???

[@ZorlacSkater]

But this will make bootstrap override your magento CSS, because it gets loaded after magento 2 styles... There are conflicts and some pages changes... for example in customer area in frontend. Is there a fix ?

[@MaxPronko]

I don’t have any issues on my Magento 2 website with the bootstrap enabled. If you can show me what you mean

[@ZorlacSkater]

@@MaxPronko For example in the frontend customer area (/customer/account) the list on the left looks weird after adding bootstrap. See screenshot: i.stack.imgur.com/IRDM5.png I am using 4.5.2. The problem is, that bootstrap is overriding the class `.nav` I had to fix it by overriding it with `.nav { display: block !important; }`

[@MaxPronko]

No one said that there couldn’t be issues. At least you can fix all the issues found. Good luck

[@ZorlacSkater]

@@MaxPronko If we load bootstrap before styles-m.css / styles-l.css, then it does not override anything from magento. Do you know how we can load bootstrap before?

[@victorpinochet6745]

ty men

[@Viralplace]

Now Go to the single view of the product ... you will not see the image do you know? You will have width 1px height 1px.

[@pegatino]

Why do you use the design folder, I thought that nothing was added to that folder? I created my own module and put all my stuff there, including the web folder with the css file inside, but it doesn't work for me

[@MaxPronko]

Design folder for design and theme changes e.g. layout, phtml and less related files that are particularly used on the storefront.