Bootstrap 4 - word wrap text without change the height - html

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>

Related

Creating a uniform button group using Bootstrap

I am trying to build a uniform button group.
The group has 2 rows with 8 buttons each and the alphabets inside the buttons change from time to time.
Code snippet: One row of the button group
<div class="btn-toolbar" >
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="0" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="1" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="2" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="3" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="4" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="5" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="6" >Q</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="7" >Q</button>
</div>
</div>
This is how it looks
How should I go about aligning them?
Thanks in advance!

Try this.
.btn-group button{width:50px;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="btn-toolbar" >
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="0" >A</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="1" >B</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="2" >C</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="3" >D</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="4" >E</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="5" >F</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="6" >G</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="7" >H</button>
</div>
</div>
<div class="btn-toolbar mt-3">
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="0" >I</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="1" >J</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="2" >K</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="3" >L</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="4" >M</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="5" >N</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="6" >O</button>
</div>
<div role="group" class="btn-group mr-2" >
<button type="button" class="btn btn-primary" id="7" >P</button>
</div>
</div>
Using a specified width makes uniform.

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 - How to create a table, which starts from second column?

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>

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>

How to put some space between elements when bootstrap grid collapse?

For example, see below code, when I resize the browser to very small width, the gird will collapse, so two button groups and text align in vertical, and there is no space between them, how can I add some space?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">
asdf
</div>
</div>

You can set the margin-bottom initially or in the media where it changes like this:
#media (max-width: 991px){
.col-margin{
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2 col-margin">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8 col-margin">
asdf
</div>
</div>
Check this out for more info about bootstrap grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
And this for better understanding of media: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

You can use .classname >[class*='col-'] in conjunction with your row to add space or whatever rule to your columns inside that row.
#media (max-width: 991px) {
.col-space >[class*='col-'] {
margin-bottom: 10px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row col-space">
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-2">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<div class="col-md-8">asdf</div>
</div>
</div>