How to apply margins or css classes to Angular 2 component?

Question

Suppose I have a component that I want to apply some margins to, preferably via Bootstrap helper classes, e.g. mt-3 to apply top margin. When I specify them on the component like this:

<my-custom-input 
   required 
   class="mt-3" 
   name="usr" 
   label="User" 
   placeholder="Please enter username" 
   [(ngModel)]="username">
</my-custom-input>

the class="mt-3" does not do anything! Setting the margin manually via Chrome dev tools is not possible either... I'm guessing because my-custom-input is not a predefined HTML element (like div), it cannot have defined margins?

This seems incredibly trivial thing to need in any application, but I'm surprised I was unable to find an answer thus far. How do we reposition such component? At the very least, specifying margins at the parent level (not inside components template) seems crucial thing to need?..

Answer 1

Give it a display: block; in your css