How to set a same card Height in bootstrap 4 - css

I cant make my cards have the same size
ive been working in this problem but i dont find a solucion at all... ive try it to use h-xxx, align-items-stretch and Height:100% but i cant make my cards have the same size, or the same height in this case
this is my actual code of what im doing
<div class="content">
<div class="container-fluid" style=" height:360px">
<div class="row align-items-stretch ">
<!-- DETALLES DEL PROYECTO -->
<div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
<div class="card-header" align="center">
<h4 class="title">{{c.nombrep}}</h4>
</div>
<div class="container ">
<div class="row">
<div class="form-group col-md-6">
<label id="letras" for="Nombre">Nombre del Proyecto</label>
<input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="ClienteP">Cliente</label>
<input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
maxlength="20" size="20">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="AdminP">Administrador del Proyecto</label>
<input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
name="AdminP" maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="CodigoP">Codigo</label>
<input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
id="CodigoP" name="CodigoP" maxlength="40">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="FechaIP">Fecha de Inicio</label>
<input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaIP">
</div>
<div class="form-group col-md-6">
<label for="FechaCP">Fecha de Culminacion</label>
<input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaCP">
</div>
</div>
<div class="row justify-content-center">
<div class="form-group ">
<label>Plataforma</label><br />
<select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
<option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
<option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
</select>
</div>
</div>
</div>
</div>
<!-- CASOS DE PRUEBA -->
<div class="card h-100 ml-3 d-flex " id="card">
<div class="card-header" align="center">
<p class="text-muted">Casos de Pruebas Creados</p>
</div>
<!-- <div class="header" align="center" style="padding-top:15px">
<p class="text-muted">Casos de Pruebas Creados</p>
</div> -->
<div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">
<table class="table table-hover">
<thead class="text-black-50">
<tr id="personalizacion">
<th>
<div class="checkbox custom-control custom-checkbox">
<mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
(change)="checkAll()"></mat-checkbox>
<label for="checkbox1"></label>
</div>
</th>
<th scope="col">Nombre del Caso</th>
<th scope="col">Estatus</th>
<th scope="col">Herramientas</th>
</tr>
</thead>
<tbody *ngFor="let a of casosdeprueba; let b = index">
<tr>
<td>
<div class="checkbox">
<mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
<label for={{a.idcdp}}></label>
</div>
</td>
<!-- Esto es lo que estaba dentro del tb del nombre del caso prueba
display:block;text-overflow: ellipsis;width: 150px;overflow: hidden;
y fue removido dejando solo esto
white-space: nowrap;
-->
<td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
<td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
<button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
</td>
<td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
*ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-success pointer"></i></button>
</td>
<td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
*ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-danger pointer"></i></button>
</td>
<td *ngIf="a.proceso === 'ejecutando'">
<div class="loader" id="loader">Loading...</div>
</td>
<td>
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
description
</i></button>
<button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Descripción" class="material-icons pointer">
remove_red_eye
</i></button>
</div>
<div class="btn-group btn-group-justified ">
<button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
create
</i></button>
<button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
file_copy
</i></button>
<button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
delete
</i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer text-muted text-center">
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
<i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
class="material-icons pointer">
alarm
</i></button>
<button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
alarm
</i></button>
<button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
add_circle
</i></button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
</button>
</div>
</div>
</div>
</div>
</div>
this is what i get with the code that i attached
but i need my two cards with the same height , the problem itsef comes when i add more items to my table, because its start to grow, and overpass the height of the left card, if a set a static heigth, the card losses his responsive feature

i think in this situation the only thing is to set a fixed height like, height: 500px, or 50vh.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.align-items-stretch.row {
height: 50vh;
}
</style>
<div class="content">
<div class="container-fluid" style=" height:360px">
<div class="row align-items-stretch ">
<!-- DETALLES DEL PROYECTO -->
<div class="card h-100 w-40 ml-3" id="detalles" *ngFor="let c of proyectof">
<div class="card-header" align="center">
<h4 class="title">{{c.nombrep}}</h4>
</div>
<div class="container ">
<div class="row">
<div class="form-group col-md-6">
<label id="letras" for="Nombre">Nombre del Proyecto</label>
<input type="text" value={{c.nombrep}} class="form-control" id="NombreP" disabled name="NombreP"
maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="ClienteP">Cliente</label>
<input type="text" value={{c.nombrecliente}} class="form-control" disabled id="ClienteP" name="ClienteP"
maxlength="20" size="20">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="AdminP">Administrador del Proyecto</label>
<input type="text" value={{persona}} pattern="[A-Za-z]+" disabled class="form-control" id="AdminP"
name="AdminP" maxlength="40" size="20">
</div>
<div class="form-group col-md-6">
<label for="CodigoP">Codigo</label>
<input type="text" pattern="[+#*\d*]+" value={{c.numero}} disabled maxlength="10" class="form-control"
id="CodigoP" name="CodigoP" maxlength="40">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="FechaIP">Fecha de Inicio</label>
<input type="text" value="{{c.fechaini | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaIP">
</div>
<div class="form-group col-md-6">
<label for="FechaCP">Fecha de Culminacion</label>
<input type="text" value="{{c.fechafin | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="FechaCP">
</div>
</div>
<div class="row justify-content-center">
<div class="form-group ">
<label>Plataforma</label><br />
<select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
<option *ngIf="c.tipo=='USSD'" value="1">USSD</option>
<option *ngIf="c.tipo=='SMS'" value="1">SMS</option>
</select>
</div>
</div>
</div>
</div>
<!-- CASOS DE PRUEBA -->
<div class="card h-100 ml-3 d-flex " id="card">
<div class="card-header" align="center">
<p class="text-muted">Casos de Pruebas Creados</p>
</div>
<!-- <div class="header" align="center" style="padding-top:15px">
<p class="text-muted">Casos de Pruebas Creados</p>
</div> -->
<div id="tabla" class="table-responsive text-nowrap" style="overflow:auto;">
<table class="table table-hover">
<thead class="text-black-50">
<tr id="personalizacion">
<th>
<div class="checkbox custom-control custom-checkbox">
<mat-checkbox color="primary" id="uno" [checked]="checkBoxMayor" type="checkbox"
(change)="checkAll()"></mat-checkbox>
<label for="checkbox1"></label>
</div>
</th>
<th scope="col">Nombre del Caso</th>
<th scope="col">Estatus</th>
<th scope="col">Herramientas</th>
</tr>
</thead>
<tbody *ngFor="let a of casosdeprueba; let b = index">
<tr>
<td>
<div class="checkbox">
<mat-checkbox color="primary" #box id='{{a.idcdp}}/{{a.nombrecdp}}' [checked]="check"
type="checkbox" (change)="cambiarCheckbox($event, box.id)"></mat-checkbox>
<label for={{a.idcdp}}></label>
</div>
</td>
<!-- Esto es lo que estaba dentro del tb del nombre del caso prueba
display:block;text-overflow: ellipsis;width: 150px;overflow: hidden;
y fue removido dejando solo esto
white-space: nowrap;
-->
<td style="white-space: nowrap" mat-raised-button matTooltip={{a.nombrecdp}}>{{a.nombrecdp}}</td>
<td mat-raised-button matTooltip="Sin Ejecutar" *ngIf="a.idestado === 2 && a.proceso!='ejecutando'">
<button class="tune" type="submit"><i class="fa fa-circle pointer" style="color:yellow"></i></button>
</td>
<td mat-raised-button matTooltip="Exitoso, presione para conocer mas detalles"
*ngIf="a.idestado === 0 && a.proceso!='ejecutando'"> <button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-success pointer"></i></button>
</td>
<td mat-raised-button matTooltip="Fallido, presione para conocer mas detalles"
*ngIf="a.idestado === 1 && a.proceso!='ejecutando'"><button class="tune"
[routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit"><i
class="fa fa-circle text-danger pointer"></i></button>
</td>
<td *ngIf="a.proceso === 'ejecutando'">
<div class="loader" id="loader">Loading...</div>
</td>
<td>
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button class="tune" [routerLink]="['/Gestion/Historial_del_caso', id, a.idcdp]" type="submit"><i
class="icon" mat-raised-button matTooltip="Histórico" class="material-icons pointer">
description
</i></button>
<button class="tune" [routerLink]="['/Gestion/Detalles_del_caso', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Descripción" class="material-icons pointer">
remove_red_eye
</i></button>
</div>
<div class="btn-group btn-group-justified ">
<button class="tune" [routerLink]="['/Gestion/Modificando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Editar caso de prueba" class="material-icons pointer">
create
</i></button>
<button class="tune" [routerLink]="['/Gestion/Copiando', id, a.idcdp]" type="submit"><i
mat-raised-button matTooltip="Copiar caso de prueba" class="material-icons pointer">
file_copy
</i></button>
<button class="tune" (click)="borrarcdp(a.idcdp)" type="submit"><i mat-raised-button
matTooltip="Eliminar Caso de Prueba" class="material-icons pointer">
delete
</i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer text-muted text-center">
<div class="btn-group btn-group-justified ">
<!-- <button [routerLink]="['/Gestion/Estado_del_caso', id, a.idcdp]" type="submit" class="btn btn-primary">Estado</button> -->
<button *ngIf="show4" class="tune" type="submit" (click)="iniEjecucion()"><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="!show4" class="tune" type="submit" disabled><i class="icon" mat-raised-button
matTooltip="Ejecutar Casos de Prueba" class="material-icons pointer">
directions_run
</i></button>
<button *ngIf="show4" class="tune" type="submit" data-toggle="modal" data-target="#datos">
<i mat-raised-button matTooltip="Agendar Ejecucion de Proyectos"
class="material-icons pointer">
alarm
</i></button>
<button *ngIf="!show4" class="tune" disabled type="submit"><i mat-raised-button
matTooltip="Agendar Ejecucion de Proyectos" class="material-icons pointer">
alarm
</i></button>
<button class="tune" [routerLink]="['/Gestion/Creando_caso_de_prueba', id ]" type="submit"><i
mat-raised-button matTooltip="Crear un nuevo Caso de Prueba" class="material-icons pointer">
add_circle
</i></button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#datos">Agendar
</button>
</div>
</div>
</div>
</div>
</div>

https://getbootstrap.com/docs/4.0/components/card/#card-groups
https://getbootstrap.com/docs/4.0/components/card/#card-decks
Check out card groups and decks. These create uniform sizing. You can also look into how this is implemented to learn how to do it manually if desired.

Related

How to insert multiple checkbox values into firebase using vue js

I've a form that contains a textarea and a table with a list of many members (from a collection named Members). Each table's contain two checboxes: one to mark the presence of the member and the second one to mark his payment. After clicking on the submit button I'd like to have in my firebase database something like this:
Meeting collection:
associationId,
textareaValue,
createdAd
Presence collection:
memberId,
meetingId,
present: true or false,
createAt
Payment collection:
memberId,
meetingId,
payment: true or false,
createAt
<form #submit.prevent="handleSubmitNewMeeting">
<!-- step one -->
<div class="card" v-if="showFormPart1">
<div class="card-header">
<h4>Entrer le sujet principal de la réunion</h4>
</div>
<div class="card-body">
<div class="form-group">
<textarea class="form-control" v-model="subjects" required rows="3"></textarea>
</div>
<p></p>
<div class="row">
<div class="col-sm-6">
<button #click="showForm=false" class="btn btn-danger" style="width: 100%">
Annuler
</button>
</div>
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=true;
showFormPart1=false;">
Suivant
</button>
</div>
</div>
</div>
</div>
<p></p>
<!-- step two -->
<div class="card" v-if="showFormPart2">
<div v-if="members">
<div class="card-header">
<h4>Cocher les présences et payements</h4>
</div>
<div class="card-block p-0">
<table class="table table-bordered">
<thead class="">
<tr align="center">
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">Téléphone</th>
<th scope="col">Présence</th>
<th scope="col">Payment</th>
</tr>
</thead>
<tbody>
<tr v-for="member in members" :key="member.id" align="center">
<td>{{ member.memberFirstname }}</td>
<td>{{ member.memberLastname }}</td>
<td>{{ member.memberPhoneNumber }}</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="present">
<span class="slider round"></span>
</label>
</td>
<td>
<label class="switch">
<input type="checkbox" class="default" v-model="payment">
<span class="slider round"></span>
</label>
</td>
</tr>
</tbody>
</table>
<p></p>
<div class="row">
<div class="col-sm-6">
<button
type="button" class="btn btn-outline-secondary" #click="showFormPart2=false;
showFormPart1=true;">
Précédent
</button>
</div>
<div class="col-sm-6">
<button class="btn btn-secondary"> Valider </button>
</div>
</div>
</div>
</div>
</div>
<p></p>
</form>
How to do these with firebase using Vue Js please ? thanks !

How to move multiple buttons to the top right

I have 10 buttons and I would like to place the buttons on the top right, but I don't know how to do it? Currently my buttons are at the bottom, I don't know how to move my buttons?
I would like to get this result, (see below)
example
I think I need to use a display:flex ?
Do you have any idea, please?
Here is my code below
Thank you in advance for your help et your time.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="home-content container">
<h1 class="text-center pt-5 pb-3">Signalétique</h1>
<div class="row pt-3 container">
<div class="card" style="width: 100%;">
<div class="card-body">
<table class="table table-hover table-striped" style="width: 60%">
<tbody>
<tr>
<th>Ticker</th>
<td>SOLB</td>
</tr>
<tr>
<th>Code SVM</th>
<td>347075</td>
</tr>
<tr>
<th>Code ISIN</th>
<td>BE00003470755</td>
</tr>
<tr>
<th>Genre</th>
<td>Actions</td>
</tr>
<tr>
<th>Pays d'origine</th>
<td>Belgique</td>
</tr>
<tr>
<th>Secteur économique</th>
<td>Matériaux</td>
</tr>
<tr>
<th>Devise de cotation</th>
<td>EUR</td>
</tr>
<tr>
<th>Groupe de cotation</th>
<td>(AO)</td>
</tr>
<tr>
<th>Unité de cotation</th>
<td>1,0000000</td>
</tr>
<tr>
<th>Site Internet</th>
<td>www.solvay.com</td>
</tr>
</tbody>
</table>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ">Best Execution</button>
<button type="button" class="btn btn-primary mb-2">Etat du marché</button>
<button type="button" class="btn btn-primary mb-2">Graphiques Historiques</button>
<button type="button" class="btn btn-primary mb-2">Historique des cours</button>
<button type="button" class="btn btn-primary mb-2">Ordre</button>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ms-2">Best Execution</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Etat du marché</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Graphiques Historiques</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Historique des cours</button>
<button type="button" class="btn btn-primary mb-2 ms-2">Ordre</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Minor adjustments will need to be made to the columns, but here's a solution:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<body>
<div class="home-content container">
<h1 class="text-center pt-5 pb-3">Signalétique</h1>
<div class="row pt-3 container">
<div class="card" style="width: 100%;">
<div class="card-body">
<div class="row">
<div class="col">
<table class="table table-hover table-striped" style="width: 60%;">
<tbody>
<tr>
<th>Ticker</th>
<td>SOLB</td>
</tr>
<tr>
<th>Code SVM</th>
<td>347075</td>
</tr>
<tr>
<th>Code ISIN</th>
<td>BE00003470755</td>
</tr>
<tr>
<th>Genre</th>
<td>Actions</td>
</tr>
<tr>
<th>Pays d'origine</th>
<td>Belgique</td>
</tr>
<tr>
<th>Secteur économique</th>
<td>Matériaux</td>
</tr>
<tr>
<th>Devise de cotation</th>
<td>EUR</td>
</tr>
<tr>
<th>Groupe de cotation</th>
<td>(AO)</td>
</tr>
<tr>
<th>Unité de cotation</th>
<td>1,0000000</td>
</tr>
<tr>
<th>Site Internet</th>
<td>www.solvay.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2">
Best Execution
</button>
<button type="button" class="btn btn-primary mb-2">
Etat du marché
</button>
<button type="button" class="btn btn-primary mb-2">
Graphiques Historiques
</button>
<button type="button" class="btn btn-primary mb-2">
Historique des cours
</button>
<button type="button" class="btn btn-primary mb-2">
Ordre
</button>
</div>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary mb-2 ms-2">
Best Execution
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Etat du marché
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Graphiques Historiques
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Historique des cours
</button>
<button type="button" class="btn btn-primary mb-2 ms-2">
Ordre
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Try using a flexbox 👍🏼
First use main container then display it as flex and with some container and items properties you will get what you want
Display : flex
And proceed ....

Bootstrap Pop-up Modal is not showing up. Instead I get black screen

I am working on 2 bootstrap modals - Update modal & delete modal.
Update modal is working perfectly fine on click of update button.
But when I click on delete button(same as for update), delete modal doesnt pop-up, instead I get a black screen.
I am struggling on this issue quite long and not able to get the solution for this.
I have tried doing "inspect element" & compare both the modals, but it seems fine to me.
Also, I have found similar queries on SOF but it did not work.
I have add/remove different css & js files in the script tag but still it didn't work for me.
Below is the code :-
CSS & js links inside head tag :-
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Update & Delete Buttons to call Modals :-
<td align="center">
<!-- Update Button -->
<button class="btn btn-primary btn-xs" onclick="editEmp(${emp.empid})" data-toggle="modal" data-target="#editemp" data-title="Edit"><em class="glyphicon glyphicon-pencil"></em></button>
<!-- Delete Button -->
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteemp" data-title="Delete"><em class="glyphicon glyphicon-trash"></em></button>
</td>
Update Modal :-
<div class="modal fade" id="editemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="left: -600px" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<form:form id = "regForm" action="registerEmp" modelAttribute="empreg">
<!-- some form elements -->
</form:form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
Delete Modal
<div class="modal fade" id="deleteemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="left: -640px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>
Any help is really appreciated.
#CoderDS
Link For Reference
You have missed a closing div. This should get your work done.
Updated HTML
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
<h3 class="panel-title">Employee Details</h3>
</div>
<div class="col col-xs-6 text-right">
<button type="button" class="btn btn-sm btn-primary btn-create" onclick="createNew()">Create New</button>
</div>
</div>
</div>
<div class="panel-body table-responsive">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th class="hidden-xs">Employee Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Country</th>
<th>Contact</th>
<th>Email</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Education</th>
<th>UserName</th>
<th>Password</th>
</tr>
</thead>
<tbody id="myTable">
<!-- foreach -->
<c:forEach items="${data}" var="emp">
<tr>
<td align="center">
<button class="btn btn-primary btn-xs" onclick="editEmp(${emp.empid})" data-toggle="modal" data-target="#editemp" data-title="Edit"><em class="glyphicon glyphicon-pencil"></em></button>
<button class="btn btn-danger btn-xs" onclick="deleteemp(${emp.empid})" data-toggle="modal" data-target="#delemp" data-title="Delete"><em class="glyphicon glyphicon-trash"></em></button>
</td>
<td class="hidden-xs">${emp.empid}</td>
<td>${emp.firstname}</td>
<td>${emp.lastname}</td>
<td>${emp.address}</td>
<td>${emp.country}</td>
<td>${emp.contact}</td>
<td>${emp.email}</td>
<td>${emp.gender}</td>
<td>${emp.dob}</td>
<td>${emp.education}</td>
<td>${emp.username}</td>
<td>${emp.password}</td>
</tr>
</c:forEach>
<!-- foreach -->
</tbody>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-4">Page 1 of 5
</div>
<div class="col col-xs-8">
<ul class="pagination hidden-xs pull-right" id="myPager">
</ul>
<ul class="pagination visible-xs pull-right">
<li>«</li>
<li>»</li>
</ul>
</div>
<div class="col-md-12 text-center">
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div></div>
</div>
</div>
</div></div></div>
<div class="modal fade" id="editemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Employee
Details</h4>
</div>
<form:form id = "regForm" action="registerEmp" modelAttribute="empreg">
<div class="modal-body">
<form:hidden path="empid" id="empid"/>
<div class="form-group">
<label class="control-label" for="firstname">Name</label>
<!-- <label>First Name</label> -->
<form:input path="firstname" id="firstname" class="form-control " type="text"></form:input>
</div>
<div class="form-group">
<label class=" control-label" for="lastname">Last Name</label>
<form:input path="lastname" id="lastname" class="form-control " type="text"></form:input>
</div>
<div class="form-group">
<label class=" control-label" for="address">Address</label>
<!-- <label>Address</label> -->
<form:textarea path="address" id="address" class="form-control " placeholder="Enter Address" type="text"></form:textarea>
</div>
<div class="form-group">
<label>Country</label>
<form:select path="country" id="country" class="form-control" placeholder="Select your country">
<form:option value="select">Select Your Country</form:option>
<form:option value="India">India</form:option>
<form:option value="USA">USA</form:option>
<form:option value="Australia">Australia</form:option>
<form:option value="England">England</form:option>
<form:option value="Germany">Germany</form:option>
<form:option value="China">China</form:option>
<form:option value="Pakistan">Pakistan</form:option>
</form:select>
</div>
<div class="form-group">
<label class="control-label" for="gender">Gender</label>
<div class="">
<label class="radio-inline" for="gender-0"> <form:radiobutton
path="gender" name="gender" id="gender-0" value="Male" />
Male
</label> <label class="radio-inline" for="gender-1"> <form:radiobutton
path="gender" name="gender" id="gender-1" value="Female" />
Female
</label>
</div>
</div>
<div class="form-group">
<label>Date of Birth</label>
<form:input path="dob" id="dob" class="form-control " placeholder="Enter Date of Birth" type="date"></form:input>
</div>
<div class="form-group">
<label>Contact</label>
<form:input path="contact" id="contact" class="form-control " placeholder="Enter Mobile/phone number" type="text"></form:input>
</div>
<div class="form-group">
<label>Email Address</label>
<form:input path="Email" id="email" class="form-control " placeholder="xyz#abc.com" type="text"></form:input>
<div class="form-group">
</div>
<div class="form-group">
<label>Education</label>
<form:input path="education" id="education" class="form-control " placeholder="Enter highest education" type="text"></form:input>
</div>
</div>
<div class="form-group">
<label>Username</label>
<form:input path="username" id="username" class="form-control " placeholder="Enter username" type="text"></form:input>
</div><br><br>
<div class="form-group">
<label>Password</label>
<form:password path="password" id="password" class="form-control " placeholder="Enter password" ></form:password>
</div>
<div class="modal-footer ">
<button type="submit" class="btn btn-warning btn-lg"
style="width: 100%;">
<span class="glyphicon glyphicon-ok-sign"></span> Update
</button>
</div>
</form:form>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</div>
<div class="modal fade" id="delemp" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
<!-- /.modal-content -->
</div>

I am trying to add colors to buttons when a button is clicked. The buttons are under ng-repeat

This is the html where the seats are getting generated inside ng-repeat directive. ng-class has been used to add colors when a seat is selected. But it is not working.
You can see my code in a JSfiddle and below:
<body class="text-center" ng-app="movieApp" ng-controller="movieController">
<div id="content"> <span>
Name: <input type="text" ng-model="name" required>
Number of Seats: <input type="text" ng-model="seat" required>
</span>
</div>
<div id="button">
<button ng-click="Select()">Start Selecting</button>
</div>
<div ng-if="selected">
<div>Row A
<span ng-repeat="value in values" ng-class="{ 'selected-class-name': $event == selectedIndex }" ng-click="SeatSelected($event)">
<input type="button" id={{"A"+value}} >
</span>
</div>
<div>Row B
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
<input type="button" id={{"B"+value}} >
</span>
</div>
<div>Row C
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
<input type="button" id={{"C"+value}} >
</span>
</div>
<div>Row D
<span ng-repeat="value in values" ng-class="{'selected':$event = selectedRow}" ng-click="SeatSelected($event)">
<input type="button" id={{"A"+value}} >
</span>
</div>
<button ng-click=Confirm()>Confirm Selection</button>
<div ng-if="confirmed" class="text-center">Create a Table
<table>
<tr>
<th ng-repeat="header in headers">{{header.name}}</th>
</tr>
<tr ng-repeat="row in data">
<td>{{row.name}}</td>
<td>{{row.seat}}</td>
<td>{{row.seatSelected}}</td>
</tr>
</table>
</div>
</div>
</body>
Check this fiddle:
http://jsfiddle.net/hv9ssxuf/
I've added angular.element(event.toElement).toggleClass('selected'); on seat click, and it works fine for me.
Hope it helps.

Twitter Bootstrap 3 Input and icon do not display inline

My problem is that I cannot display my glyphicon before my inputs.
Here is my code:
<div class="modal fade " id="login" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title">Log in</h4>
</div>{{--close modal header --}}
<div class="modal-body text-center">
{{ Form::open(array('url'=>'/' ,'role'=>'form')) }}
#if($errors->count()>0)
<div class="alert alert-danger" style="text-align:center;">
<p>Errors</p>
<ul>
#foreach($errors->all() as $error)
<li>
{{$error}}
</li>
#endforeach
</ul>
</div>
#endif
#if(Session::has('flash_message'))
<div class="alert alert-danger" style="text-align:center;">
<p>{{Session::get('flash_message')}}</p>
</div>
#endif
<div class="form-group">
<span class="glyphicon glyphicon-user ">
{{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }}
</span>
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock ">
{{ Form::password('password', ['required'=>'1','placeholder'=>'Password','id'=>'password','class'=>'form-control']) }}
</span>
</div>
<br/>
{{'
'}}
{{ Form::submit('login',['class'=>'btn']) }}
or
{{ Form::button('Sign up',['class'=>'btn btn-danger','data-dismiss'=>'modal','data-toggle'=>'modal','data-target'=>'#signup'])
}}
{{ Form::close() }}
</div>{{--close modal body --}}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div> {{--close modal --}}
Where rows such as {{ Form::text('username', null, ['required'=>'1','placeholder'=>'Username','id'=>'user','class'=>'form-control']) }}
are Laravel 4 commands which generate input type="text" name="text" class="form-control pleceholder= ...
Please answer only for bootstrap 3..
You could use .form-horizontal, and put your glyphicon in an other column than the field :
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-user"></span></label>
<div class="col-sm-5">
<input type="text" placeholder="Username" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 col-sm-offset-3 control-label"><span class="glyphicon glyphicon-lock"></span></label>
<div class="col-sm-5">
<input type="password" placeholder="Username" class="form-control"/>
</div>
</div>
<br/>
<input type="submit" class="btn btn-default" value="Login"/>
or
<input type="submit" class="btn btn-danger" value="Sign up"/>
</form>
Play with col-sm-x and col-sm-offset-x to get the width you need.
Bootply

Resources