How to add a Bootstrap CSS for Your Magento 2 Theme

[@bohdanbatsenko4843]

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

[@mawizshahab2416]

Thanks a lot Max! ♥️

[@MaxPronko]

You are welcome

[@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).

[@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.

[@tantivit]

Many thanks for the video!

[@MaxPronko]

Thanks for watching!

[@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.

[@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.

[@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

[@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

[@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?

[@alangoldberg4723]

What's the surprise at the end?

[@MaxPronko]

Have a look the full video

[@abautixta]

cool Max, could you make one with tailwind css?

[@MaxPronko]

I definitely could.

[@reenakotadiya819]

and bootstrap JS ???

[@iamviduranishantha]

Thanks, Max

[@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.

[@naimali6385]

Thank you.

[@victorpinochet6745]

ty men

[@DesiTonyFaimly]

best videos

[@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.