How do I get the components side by side using Angular?

Question

Please, explain this simple thing to the novice.

So I have 3 three components made in Angular:

• App.Component (Which comes automatically)
• Dog.Component
• Cat.Component

The cat and dog components contain one images of these animals.

Question: How and where do I put the code snippet when I want to get the cat & dog components side by side(not below)? Index.html/styles.css? or App.Component? or?

As you can see, I may be a little lost with this structure at this point...

Answer 1

I have used bootstrap to display image side by side.

<div class="col-md-12 col-sm-12">

    <div class=" col-md-6 col-sm-6">
        <dog-component></dog-component>
    </div>
  
    <div class=" col-md-6 col-sm-6">
       <cat-component></cat-component>
    </div>
  </div>

Make sure that right component selector is used in the app component html file

Answer 2

You can create a wrapper using a div and then apply the styles in CSS that will make the components be side by side.

Example

In your App component HTML:

<div class="app-container">
   <dog-component></dog-component>
   <cat-component></cat-component>
</div>

App component CSS:

.app-container {
   display: flex;
}