-1

I developed ASP.NET MVC 5 single page application using Angular 5 and Bootstrap. Recently I updated app to use Angular 6. Now HTML layout does not have spaces between Bootstrap controls.

For example this HTML:

<form class="form-inline">
    <div class="form-group">
      <label for="exampleInputName2">Name</label>
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="form-group">
      <label for="exampleInputEmail2">Email</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
    </div>
    <button type="submit" class="btn btn-default">Send invitation</button>
 </form>

Firefox dev tools edit HTML option displays as:

<form class="form-inline"><div class="form-group"><label for="exampleInputName2">Name</label><input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe"></div><div class="form-group"><label for="exampleInputEmail2">Email</label><input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com"></div><button type="submit" class="btn btn-default">Send invitation</button></form>.

When I edit the HTML and add whitespace or line break like in the first example, then browser displays spaces between controls as has to be.

Is Angular 6 compacts HTML of component templates? How do I make the app (that uses Bootstrap) look as expected?

trevorp
  • 1,161
  • 1
  • 14
  • 19
Nikolay Yeryomenko
  • 1
  • 1

1 Answers1

0

You can get excellent design components from https://material.angular.io/. See https://material.angular.io/guide/getting-started