Bootstrap classes like .container and .mt-5 work, but .btn classes don’t apply in my Odoo 18 Owl component. How can I include full Bootstrap CSS in my module via the manifest file?
Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:
- CRM
- e-Commerce
- Apskaita
- Atsarga
- PoS
- Project
- MRP
This question has been flagged
1
Atsakyti
119
Rodiniai
Hi,
In Odoo 18, only limited Bootstrap utility classes are available by default, so .btn and similar styles won’t work unless you manually include the full Bootstrap CSS. To fix this, you can load Bootstrap via your module’s __manifest__.py file. The easiest method is to add a CDN link under the web.assets_backend section, such as the Bootstrap 5 CSS file from jsDelivr. Alternatively, you can download bootstrap.min.css, place it in your module’s static/lib/bootstrap/css/ directory, and reference it in the same way.
Manifest:-
'assets': {
'web.assets_backend': [
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
],
},
Add JS for full Bootstrap functionality
'assets': {
'web.assets_backend': [
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css',
'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js',
],
},
Once Bootstrap is included, you can use standard classes like .btn, .btn-primary, and .mt-3 directly in your OWL templates. If you also need dynamic Bootstrap features such as modals or dropdowns, include the Bootstrap JavaScript bundle in your assets. Finally, restart Odoo and clear the assets cache to apply the changes.
Reference:-
* https://www.cybrosys.com/blog/bootstrap-basics
* https://www.odoo.com/sl_SI/forum/pomoc-1/how-to-use-bootstrap-4-when-creating-report-pdf-243823
Hope it helps
Enjoying the discussion? Don't just read, join in!
Create an account today to enjoy exclusive features and engage with our awesome community!
Registracija