1

I´m trying to make a simple page using bootstrap grid, but for some reason it's not working.

app-component.html:

<body>
  <div class="container">
  <div class="row">
    <div class="col-4">test</div>
    <div class="col-8">
      <form (ngSubmit)="retornaGuias()">
        <input
          type="text"
          class="form-control"
          placeholder="Year"
          id="inputAno"
          [(ngModel)]="ano"
          name="ano"
        />
      </form>
    </div>
  </div>
 </div>

here is my angular.json:

"styles": [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/bootstrap-icons/font/bootstrap-icons.css",
          "node_modules/font-awesome/css/font-awesome.css",
          "src/styles.css"
        ],

and my page is displaying like this: page in browser

And when I write in the class just class="col" it works normaly.

Hugo vilar
  • 101
  • 6

1 Answers1

2

You made a mistake in nesting your HTML. The col-x elements must be nested inside a row and add up to 12 (or else they will wrap).

<div class="container">
  <div class="row">
    <div class="col-4">test</div>
    <div class="col-8">
      <form (ngSubmit)="retornaGuias()">
        <input
          type="text"
          class="form-control"
          placeholder="Year"
          id="inputAno"
          [(ngModel)]="ano"
          name="ano"
        />
      </form>
    </div>
  </div>
</div>

Please note how col-4 and col-8 are on the same level, inside the row element.

Philipp Meissner
  • 5,273
  • 5
  • 34
  • 59