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?
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With