Bootstrap 4 - How to create a table, which starts from second column? - html

I do have this HTML, but I am not able to do this:
The width of the first column Links available should be same like the length of Links available, and the text shouldn't split this two words. It should be one line Links available
On the column Links available only header is important, the cells below will not be used, so it could be hidden
The buttons should have a little bit space between next button, and it should be like inline...
What I want to, in visual:
My HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th class="col-xl">Links available:</th>
<th class="col-xl-auto">Category 1</th>
<th class="col-xl-auto">Category 2</th>
<th class="col-xl-auto">Category 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
<tr>
<td class="col-xl"></td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
<td class="col-xl-3">
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
</td>
</tr>
</tbody>
</table>
if you would like to test my code, please use: codeply - Bootstrap snippets


If you want to remove responsiveness column
change
col-md-3
to
col-3
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<table class="table">
<thead>
<tr class="">
<th class="">Links available:</th>
<th class="">Category 1</th>
<th class="">Category 2</th>
<th class="">Category 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
<tr>
<td class=""></td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
<td class="">
<div class="row">
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</td>
</tr>
</tbody>
</table>
Second code using DIV
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid p-0">
<div class="row m-0">
<div class="col-3 p-0">
<p class="font-weight-bold">Links available:</p>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 1</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 2</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
<div class="col-3 p-0">
<p class="font-weight-bold">Category 3</p>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm col-md-3 mr-1">Small button</button>
</div>
</div>
</div>


I think you are searching for a nested Grid Layout. I recommend to read about this, so you can see examples of how to work with the Bootstrap Grid System. Even more, on XS (EXTRA SMALL) screens sizes I recommend to stack the categories vertically because of the little width you have available. You can check this all on next example:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 text-center">
<p class="my-1">Links available:</p>
</div>
<div class="col-sm-3 text-center bg-warning">
<div class="row">
<div class="col-12 my-1">Category 1:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
<div class="col-sm-3 text-center">
<div class="row">
<div class="col-12 my-1">Category 2:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
<div class="col-sm-3 text-center bg-warning">
<div class="row">
<div class="col-12 my-1">Category 3:</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-primary btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-danger btn-block">B</button>
</div>
<div class="col-4 my-1">
<button type="button" class="btn btn-success btn-block">B</button>
</div>
</div>
</div>
</div>
</div>

Related

Boostrap 3.4 - Arrange multiple buttons in two columns

I am trying to arrange a few buttons in boostrap 3.4.
I managed to do it (probably by luck) and this is how it looks
This is the code I used. The idea is to create rows and then various divs within the row with the appropriate columns widths col-xs-N.
<div id="cfd_panel" class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#analysis" href="#collapse2">CFD</a>
</div>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-block btn-default btn-sm" id='create_cfd_domain' onclick='create_cfd_domain_btn()'>
Create/Update Domain
</button>
</div>
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='map_to_area_btn()' >
Airflow Map
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_btn()' >
View
</button>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<button type="button" class="btn btn-block btn-default btn-sm" id='mesh_cfd_domain' onclick='openfoam_mesh_btn()'>
Mesh
</button>
</div>
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='open_cfd_paraview_samples_btn()' >
Samples
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" onclick='import_from_aws_btn()' >
Import
</button>
</div>
</div>
<div class="row">
<div class="col-xs-3" style="padding-right: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" id='run_cfd_cases' onclick='openfoam_run_btn()'>
Run
</button>
</div>
<div class="col-xs-3" style="padding-left: 1px">
<button type="button" class="btn btn-block btn-default btn-sm" id='sample_cfd_cases' onclick='openfoam_get_results_btn()' >
Sample
</button>
</div>
<div class="col-xs-6" style="padding-left: 10px; ali">
<button type="button" class="btn btn-link btn-sm" id='open_cfd_settings' onclick='open_cfd_settings_btn()' >
Settings
</button>
<button type="button" class="btn btn-link btn-sm" id='open_wind_template' onclick='open_wind_template_btn()' >
OFTemplate
</button>
</div>
</div>
</div>
</div>
I am now trying to rearrange the buttons in a different way, but I cannot manage to do it correctly by changing the column widths. This is what happens. The goal is to have MESH and RUN button on the same line and on the first column.
Is there a proper way to do it?

Bootstrap 4 - word wrap text without change the height

Coming from: Twitter Bootstrap Button Text Word Wrap
How can I set the word wrap of a text inside a button in bootstrap 4, without change the height or with all buttons with the same height? For example:
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>
returns this:
with the answer from that question (that is duplicated everywhere but the answer is the same everywhere)
.btn{
white-space:normal !important;
word-wrap: break-word;
}
but the expected result is that "Cambio de Nacionalidad" being aligned.

Since you are using BS 4 the col-* are flex items stretched by default so simply use height:100% on the button
.btn {
height:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm">
<button id="1" type="button" class="btn spectral btn-secondary btn-block cbb ">Opciones Generales</button>
</div>
<div class="col-sm">
<button id="2" type="button" class="btn spectral btn-secondary btn-block cbb">1</button>
</div>
<div class="col-sm">
<button id="4" type="button" class="btn spectral btn-secondary btn-block cbb">2</button>
</div>
<div class="col-sm">
<button id="5" type="button" class="btn spectral btn-secondary btn-block cbb ">3</button>
</div>
<div class="col-sm">
<button id="6" type="button" class="btn spectral btn-secondary btn-block cbb">Cambio de Nacionalidad</button>
</div>
</div><br />
<div class="row">
<div class="col-sm">
<button id="7" type="button" class="btn spectral btn-secondary btn-block cbb">4</button>
</div>
<div class="col-sm">
<button id="9" type="button" class="btn spectral btn-secondary btn-block cbb ">5</button>
</div>
<div class="col-sm">
<button id="11" type="button" class="btn spectral btn-secondary btn-block cbb">6</button>
</div>
<div class="col-sm">
<button id="12" type="button" class="btn spectral btn-secondary btn-block cbb">7</button>
</div>
<div class="col-sm">
<button id="10" type="button" class="btn spectral btn-danger btn-block cbb">Crear Item</button>
</div>
</div>
</div>

Bootstrap Navbar collapse not working properly angular6

I copied from bootstrap's site. But doesnt work me i cant figure out. Can you help me why. I am trying to fix it for hours. I want to make like menu button there also dropdowns not working properly. I copied bootstrap files to my project folder and use code to head of html file to implent them. Any help would be appreciated.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class= "container" >
<div class="pos-f-t" style="width: 202px">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4" style="width: 202px">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<div class="border bg-danger border-dark" style="height:2cm; width : 5.35cm; margin-bottom: -2px;font-weight: bold ">
<div class = "row" style="padding-left: 0.4cm" >
<p style="font-size: 20px">{{y}}</p>
<p style="font-size: 10px">{{z}}</p>
</div>
<div class ="row" style="padding-left: 0.4cm">
<p style="font-size: 20px; ">{{x}}</p>
<p style="font-size: 20px; ">{{contr}}</p>
<p style="font-size: 20px; margin-top: 0.7cm;">{{sum}}</p>
</div>
</div>
<div class ="border bg-black border-danger" style="width: 5.3cm;">
<div class ="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group" aria-label="Justified button group">
<input type ="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="getPast()" value="M" >
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="makeDivided()" value="⅟x">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="root()" value="√">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="square()" value="a²">
</div>
</div>
</div>
<div class="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clear()" value="CE">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clearAll()" value="C">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="delete()" value="←">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="division()" value="/">
</div>
</div>
</div>
<div class ="row" style="padding-left: 0.4cm">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('1')"> 1 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('2')"> 2 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('3')"> 3 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="add()" value="+" >
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class = "btn-group btn-group-justified" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('4')"> 4 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('5')"> 5 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('6')"> 6 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="substract()" value="-">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="btn-group" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('7')"> 7 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0 " (click)="getValue('8')"> 8 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('9')"> 9 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="multiple()" value="*">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="changeMark()" value="∓">
<button class="btn btn-danger border border-danger rounded-0 border-top-0" (click)="getValue('0')">0</button>
<button class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="addKama()" >,</button>
<input class="btn btn-dark border border-danger rounded-0 border-top-0" type="button" (click)="total()" value="=">
</div>
</div>
</div>
</div>
</div>

You just need to include jquery cdn to get it working
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.3.1.slim.js"
integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class= "container" >
<div class="pos-f-t" style="width: 202px">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4" style="width: 202px">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<div class="border bg-danger border-dark" style="height:2cm; width : 5.35cm; margin-bottom: -2px;font-weight: bold ">
<div class = "row" style="padding-left: 0.4cm" >
<p style="font-size: 20px">{{y}}</p>
<p style="font-size: 10px">{{z}}</p>
</div>
<div class ="row" style="padding-left: 0.4cm">
<p style="font-size: 20px; ">{{x}}</p>
<p style="font-size: 20px; ">{{contr}}</p>
<p style="font-size: 20px; margin-top: 0.7cm;">{{sum}}</p>
</div>
</div>
<div class ="border bg-black border-danger" style="width: 5.3cm;">
<div class ="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group" aria-label="Justified button group">
<input type ="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="getPast()" value="M" >
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="makeDivided()" value="⅟x">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="root()" value="√">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0" (click)="square()" value="a²">
</div>
</div>
</div>
<div class="row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clear()" value="CE">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="clearAll()" value="C">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="delete()" value="←">
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="division()" value="/">
</div>
</div>
</div>
<div class ="row" style="padding-left: 0.4cm">
<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('1')"> 1 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('2')"> 2 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('3')"> 3 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="add()" value="+" >
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class = "btn-group btn-group-justified" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('4')"> 4 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('5')"> 5 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('6')"> 6 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="substract()" value="-">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="btn-group" role="group">
<div class = "col-xs">
<div class="btn-group">
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('7')"> 7 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0 " (click)="getValue('8')"> 8 </button>
<button type="button" class="btn btn-danger btn-lg border border-dark rounded-0 border-top-0" (click)="getValue('9')"> 9 </button>
<input type="button" class="btn btn-dark btn-lg border border-danger rounded-0 border-top-0" (click)="multiple()" value="*">
</div>
</div>
</div>
</div>
<div class = "row" style="padding-left: 0.4cm">
<div class="col-xs">
<div class="btn-group">
<input type="button" class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="changeMark()" value="∓">
<button class="btn btn-danger border border-danger rounded-0 border-top-0" (click)="getValue('0')">0</button>
<button class="btn btn-dark border border-danger rounded-0 border-top-0" (click)="addKama()" >,</button>
<input class="btn btn-dark border border-danger rounded-0 border-top-0" type="button" (click)="total()" value="=">
</div>
</div>
</div>
</div>
</div>

Space between buttons with bootstrap class

I have a problem with three buttons on my site.
I would like to have some space between those buttons.
Is it possible to do this, without using inline styling?
Perhaps bootstrap has some classes for this?
I know I can simply do it with:
style='margin-right:5px;'
or write custom class with this property.
I am just wondering if bootstrap has some classes for this?
Here is example.
Problem is with this three buttons:
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>

Try to put them inside btn-toolbar or some other container.
<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>

Yes you have to wrap them
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1/2</button>
</div>
EDITED CODEPEN

<div class="btn-toolbar">
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
<button type="button" class="btn btn-primary col-sm-1">1/2</button>
</div>

d-flex justify-content-between
<div class="col-md-3 mt-4 d-flex justify-content-betweend-flex justify-content-between">
<button type="submit" class="btn btn-info text-light" id="atndanceFilter"> <i class="fa fa-search"></i> Filter Report</button>
Reset
</div>
Will work like magic.

How to remove empty space in a div element?

Here I am providing a screenshot and I outlined the area I wanted to collapse all the way to just right after the last blue buttom, touching it. I outlined the area I wanted to collapse in red. Is there a specific class that will let me do that?
Ty
code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="panel panel-primary col-md-6">
<div class="row">
<!-- Label -->
<button type="button" class="btn btn-info btn-xs btn-block" id='invoicelabel'><strong>Invoice CP</strong>
</button>
<!-- Invoice CP -->
<div class="btn-group btn-group-vertical col-md-3 test2">
<button class="btn btn-primary btn-sm" type="submit">Total Amount</button>
<button class="btn btn-primary btn-sm" type="submit">Duplicate</button>
<button class="btn btn-primary btn-sm" type="submit">Clear</button>
<button class="btn btn-primary btn-sm" type="submit">Currency</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
<button class="btn btn-primary btn-sm" type="submit" disabled>.</button>
</div>
<table class="table table-condensed">
<tbody class="col-md-10 test pull-right">
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
<tr>
<td class="default" width="20%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Pieces">
</td>
<td class="default" width="35%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Unit Price">
</td>
<td class="default" width="45%">
<input type="text" class="btn btn-default btn-sm col-sm-12 floatright" placeholder="Line Amount">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Try checking the CSS height property of the .test or .test2. Probably it is set to a specific value. If you leave it blank, the area will fit to the content.