Angular Material multiple "input" on same row

Question

How can I add multiple inputs on same row? I have tried using bootstrap but for some reason it wont work. If you have some exemple to show me.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Last Name">
  </mat-form-field>
</form>

Answer 1

Angular Material's inputs are displaying in row by default (see stackblitz below), and may be you override this behavior somewhere in your project, I mean CSS rules. If you like Flexbox, you can use @angular/flex-layout, you can easily control how to display items: in row or in column, and this package is very common among Angular developers. Here is a simple demo with "default" behavior (without any additional rules) and 2 layout options: column and row:

STACKBLITZ

Answer 2

You are probably looking at the css style display: block; Change whatever you are looking at to display: inline-block;

edit

Now that you showed some code. Your basic html is fine, it shows the inputs next to each other. So something is wrong inside your example-form or example-full-width classes.