# Theme styling and bootstrap

**URL:** <https://forum.mautic.org/t/theme-styling-and-bootstrap/6563>\
**Category:** Product Support\
**Created:** [November 16, 2016, 11:22pm UTC](https://forum.mautic.org/t/theme-styling-and-bootstrap/6563 "2016-11-16T23:22:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![digitalsmithy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/digitalsmithy/32/137_2.png) [@digitalsmithy](https://forum.mautic.org/u/digitalsmithy)\
**Post date:** [November 16, 2016, 11:22pm UTC](https://forum.mautic.org/t/theme-styling-and-bootstrap/6563/1 "2016-11-16T23:22:26Z")

</div>

I’m testing Mautic for a client who asked me to create landing pages. I did - in bootstrap as originally requested, then they said ‘Mautic’. So I’ve been using Mautic for a couple of hours trying to recreate them. I couldn’t. Couldn’t even get a full-size hero image. I’ve managed to create a custom theme (All I did was drop the bootstrap HTML into the page.twig and bootstrap.css into the theme css). Now I get a full size background - but random things don’t work.

1. I have 3 full size Divs, but only two show up.  
2. I use flex to vertical centre on the screen, but it doesn’t work. Nor does using display:table with display:table-cell and vertical-align:middle.  
3. I can’t seem to get images to pick-up from the themes img directory, even with {{ getAssetUrl(‘themes/’~template~’/img/logo.gif’, null, null, true) }}  
  
I stole the getAsset code but it doesn’t work and i’m literally using it blind.  
  
  
  
Anyone understand how Mautic renders a page? Is bootstrap already loaded as part of the lander? Any JS? Or do I have to add the css as I have done? Why doesn’t FLEX work? Why does half the page disappear? Can I use custom JS? All this and much less I understand!  
  
  
  
I have checked the tutorials but they don’t seem to go into any depth - is there a good resource to research this stuff.  
  
Thanks to any replies in advance.

---

<div class="post-metadata">

**Author:** ![digitalsmithy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/digitalsmithy/32/137_2.png) [@digitalsmithy](https://forum.mautic.org/u/digitalsmithy)\
**Post date:** [November 16, 2016, 11:22pm UTC](https://forum.mautic.org/t/theme-styling-and-bootstrap/6563/2 "2016-11-16T23:22:26Z")

</div>

I’m testing Mautic for a client who asked me to create landing pages. I did - in bootstrap as originally requested, then they said ‘Mautic’. So I’ve been using Mautic for a couple of hours trying to recreate them. I couldn’t. Couldn’t even get a full-size hero image. I’ve managed to create a custom theme (All I did was drop the bootstrap HTML into the page.twig and bootstrap.css into the theme css). Now I get a full size background - but random things don’t work.

1. I have 3 full size Divs, but only two show up.
2. I use flex to vertical centre on the screen, but it doesn’t work. Nor does using display:table with display:table-cell and vertical-align:middle.
3. I can’t seem to get images to pick-up from the themes img directory, even with {{ getAssetUrl(‘themes/’~template~’/img/logo.gif’, null, null, true) }}  
I stole the getAsset code but it doesn’t work and i’m literally using it blind.

Anyone understand how Mautic renders a page? Is bootstrap already loaded as part of the lander? Any JS? Or do I have to add the css as I have done? Why doesn’t FLEX work? Why does half the page disappear? Can I use custom JS? All this and much less I understand!

I have checked the tutorials but they don’t seem to go into any depth - is there a good resource to research this stuff.  
Thanks to any replies in advance.