CODEWITHSUNDEEP
angulartwitter-bootstrap
Mi Col
Mi Col

Reputation: 89

Bootstrap cols do not stand in a row Angular

I've got some problem with Angular components.
I have the following code:

<div class="container">
  <div class="row">
    <app-item></app-item>
    <app-item></app-item>
  </div>
</div>

Inside of app-item component i got this code:

<div class="col-6">
  <p>Some text</p>
</div>

I can't understand why those columns don't stand in row. It's actually one column under the second
But if i do like this:

<div class="container">
  <div class="row">
    <div class="col-6">
      <p>Some text</p>
    </div>
    <div class="col-6">
      <p>Some text</p>
    </div>
  </div>
</div>

Then it's working fine. Why is my code not working out when i try to use components? What is the reason it happens?
Also for some reasons my component app-item has no 100% width
Can anyone explain me what's wrong?

Upvotes: 5

Views: 1393

Answers (3)

Wahab Shah
Wahab Shah

Reputation: 2256

This could be late but may help OP or someone else. I resolved it in a similar way, although I could have resolved it like @malindu mentioned because I knew how many cols would be there but it wasn't generic.

So if you pass the class directly to your component like the following code snippet and remove the col-* div from inside the component it works fine because now the col is direct child of the row. Check the code snippet below:

<div class="container">
  <div class="row">
    <app-item class="col-6"></app-item>    <-------- check the class here
    <app-item class="col-6"></app-item>
  </div>
</div>

And then inside your component

<p>Some text</p>    <-------and then it is removed from inside here

Upvotes: 0

M. Wajdi
M. Wajdi

Reputation: 21

Just you need to include bootstrap library link :

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Some text</p>
    </div>
    <div class="col-sm-6">
      <p>Some text</p>
    </div>
  </div>
</div>
</body>
</html>

Upvotes: 1

Malindu Sandaruwan
Malindu Sandaruwan

Reputation: 1517

Plaese try the below,

<div class="container">
  <div class="row">
    <div class="col-6">
        <app-item></app-item>
    </div>
    <div class="col-6">
        <app-item></app-item>
    </div>
  </div>
</div>

Inside of app-item

<p>Some text</p>

Upvotes: 0

Related Questions