How to Align and Style my View Page in Angular - css

Question

I am working on a project using Angular-7. I tried to render a modal form with the code shown below:
user.component.html
<div id="addModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New {{ User }}</h5>
<button type="button" class="close" (click)='closeAddModal()'>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-danger" [hidden]="!error.role">
{{ error.role }}
</div>
<div class="alert alert-danger" [hidden]="!error.email">
{{ error.email }}
</div>
<div class="alert alert-danger" [hidden]="!error.first_name">
{{ error.first_name }}
</div>
<div class="alert alert-danger" [hidden]="!error.last_name">
{{ error.last_name }}
</div>
<div class="alert alert-danger" [hidden]="!error.client_id">
{{ error.client_id }}
</div>
<div class="alert alert-danger" [hidden]="!error.password">
{{ error.password }}
</div>
<form #editUserForm=ngForm>
<div class="form-group">
<label for="name">First Name</label>
<input type="name" name="first_name" id="inputName" class="form-control" placeholder="First Name" [(ngModel)]="form.first_name" required>
</div>
<div class="form-group">
<label for="name">Last Name</label>
<input type="name" name="last_name" id="inputName" class="form-control" placeholder="Last Name" [(ngModel)]="form.last_name" required>
</div>
<div class="form-group">
<label for="name">Email</label>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="example#email.com" required [(ngModel)]="form.email">
</div>
<div class="form-group">
<label for="name">Client</label>
<select class="form-control pt-1" name="client_id" [(ngModel)]="form.client_id">
<option value="null">Select Client</option>
<option *ngFor="let c of clients" value="{{c?.client_id}}">{{c.client_name}}</option>
</select>
</div>
<div class="form-group">
<label for="name">Role</label>
<div *ngFor="let role of roles">
<input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
</div>
</div>
<div class="form-group">
<label for="name">Password</label>
<input type="password" name="password" id="inputPassword" [(ngModel)]="form.password" class="form-control" placeholder="Password" required>
</div>
<div class="form-group">
<label for="name">Password Confirmation</label>
<input type="password" name="password_confirmation" id="inputPasswordConfirm" [(ngModel)]="form.password_confirmation" class="form-control" placeholder="Re enter Password" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)='addModalSubmit()' [disabled]="!editUserForm.valid">Save changes</button>
<button type="button" class="btn btn-secondary" (click)='closeAddModal()'>Close</button>
</div>
</div>
</div>
</div>
In the form, I have checkboxes for user roles. I observed that the form got truncated and some of the checkboxes not being displayed. Also, the submit button is not showing. Even the vertical scrollbar on the page could not resolve the problem.
How do I resolve this and make everything visible?
How do I make the checkboxes to be divided into three (3) columns using:
<div class="col-xs-4">

Answer 1

How do I resolve this and make everything visible?
Using overflow, solve this problem easily. For example;
<div class="content">
this is content * 70
</div>
<style>
.content {
overflow-y: scroll; /* for vertical scroll */
}
</style>
How do I make the checkboxes to be divided into three (3) columns using:
Use flex. Everyting is easy :)
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<div class="area">
<div *ngFor="let role of roles" class="item">
<input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkboxAdd($event)"> {{ role.name }}
</div>
</div>
<style>
.area {
display: flex;
flex-direction: row;
width: 100%;
}
.area .item {
width: 33.3%;
}
</style>

Answer 2

You could use bootstrap class checkbox-inline to have all the options in one line.
Please Look at this