how to make reponsive model popup in bootstrap version 3? - css

i wan to show the popup on few area for html :
for 1st popup will cover box no 5, 6,9,11
and 2nd popup will cover box no,7,8,10,12
and when i do re size my browser, it should cover those box :
for this, i created this : please check the following html in jsfiddle.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.margin1 {
padding-bottom: 5px;
padding-left: 2.5px!important;
padding-right: 2.5px!important;
}
.fixwidh {
/*min-width: 295px;*/
}
.btnClass {
width: 40%;
height: 20%;
}
.topmargin {
height: 10px;
width: 100%;
}
.sidemargin {
background-color: #e0e0e0;
}
.mainContent {
width: 94%;
background-color: red;
}
.verticaltextname1 {
position: absolute;
color: gray;
-webkit-text-shadow: 1px 1px 3px rgba(150,150,150,1);
text-shadow: 1px 1px 3px rgba(150,150,150,1);
font-size: 20px;
font-family: Raleway,Arial!important;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
top: 20px;
}
.topBox {
min-height: 121px;
margin-bottom: 10px;
margin-right: -20px;
background-color: grey;
}
.topBox2 {
min-height: 121px;
margin-bottom: 10px;
margin-top: 20px;
margin-right: -20px;
background-color: #c2c2c2;
box-shadow: 0px 0px 10px #000000;
border-top: 1px solid #cbcbcb;
border-left: 1px solid #f6f6f6;
border-bottom: 1px solid #c5c5c5;
border-right: 1px solid #cdcdcd;
}
.topBox3 {
min-height: 64px;
margin-bottom: 10px;
margin-right: -20px;
background-color: grey;
}
.pClass {
color: #ffffff;
-webkit-transform: rotate(-90deg);
margin-top: 82px;
min-width: 71px;
}
</style>
</head>
<body>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
<div class="row">
<div class="pClass">Work History</div>
<div>
<span class="verticaltextname1">1</span>
</div>
<div>
<span class="verticaltextname1">2</span>
</div>
<div class="pClass">Projects</div>
</div>
</div>
<div class="col-md-10 col-lg-10 col-sm-10 col-xs-10">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="topBox2">1</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="topBox2">2</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="topBox2">3</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="topBox2">4</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="topBox">5</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="topBox">6</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="topBox">7</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="topBox">8</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="topBox3">
9
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="topBox3">
10
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="topBox">
11
</div>
<div>X</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="topBox">
12
</div>
</div>
</div>
</div>
<div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
<div class="sidemargin">
</div>
</div>
</div>
<div class="row">
<div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
<div class="sidemargin">
</div>
</div>
<div class="col-md-10 col-sm-10">
<div style="background-color: black; height: 100%; width: 102%; border: 1px solid red;">
Carousel Div
</div>
</div>
<div class="col-md-1 col-lg-1 col-sm-1 col-xs-1">
<div class="sidemargin">
</div>
</div>
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">×</button>
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</div>
</body>
</html>

Related

Why would the overflow property on a flex item affect its flex-shrink behavior? [duplicate]

This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Why is a flex item limited to parent size?
(1 answer)
Closed 2 years ago.
I am creating a layout that contains three parts: sidebar (left), page (center), and summary (right). The left will remain fixed at the width of its inner content when the viewport width decreases, which is the expected behavior.
However, once I add overflow-y: auto to the left container, it loses respect for its inner content width, and completely shrinks along with the viewport width.
How does overflow-y: auto affect an item's flex-shrink behavior? How do I apply an overflow-y while allowing it to continue respecting its inner content width?
.root {
display: flex;
}
.root .sidebar {
border: 8px solid red;
flex: 2;
background: #f3f3f5;
height: 100vh;
display: flex;
justify-content: flex-end;
padding-top: 80px;
position: sticky;
top: 0;
/*
enable this and shrink the viewport
notice how the sidebar shrinks completely
and no longer respects the inner content's fixed width
*/
/*overflow-y: auto;*/
}
.root .page {
border: 8px solid green;
flex: 8;
max-width: 810px;
padding: 80px 80px 160px 80px;
}
#media only screen and (max-width: 1024px) {
.root .page {
padding-right: 40px;
padding-left: 40px;
}
}
.root .summary {
border: 8px solid blue;
flex: 2;
padding-top: 160px;
position: sticky;
top: 0;
align-self: flex-start;
}
.root .actions {
border: 8px solid orange;
position: fixed;
bottom: 0;
padding: 10px;
width: 100%;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.root .actions .inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-basis: 650px;
}
.root .stepper {
border: 4px solid #333;
flex-basis: 320px;
}
.root .stepper .step {
display: flex;
align-items: center;
margin: 0px 70px 40px 40px;
white-space: nowrap;
}
.root .stepper .step .circle {
background: #ffc2d4;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
.root .form-stuff {
margin-bottom: 80px;
}
.root .card {
border: 4px solid #333;
align-self: flex-start;
border-radius: 8px;
padding: 10px;
max-width: 280px;
min-width: 180px;
white-space: nowrap;
}
.root .card .title {
margin: 20px 0;
}
.root .card .subtitle {
margin: 20px 0;
font-size: 14px;
}
.root .button {
background: #ffc2d4;
padding: 10px 20px;
}
* {
box-sizing: border-box;
}
<div class="root">
<div class="sidebar">
<div class="stepper">
<div class="step">
<div class="circle">
1
</div>
<div class="title">Step 1</div>
</div>
<div class="step">
<div class="circle">
2
</div>
<div class="title">Step 2</div>
</div>
<div class="step">
<div class="circle">
3
</div>
<div class="title">Step 3</div>
</div>
<div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div><div class="step">
<div class="circle">
4
</div>
<div class="title">Step 4</div>
</div>
</div>
</div>
<div class="page">
<div class="form">
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
<div class="form-stuff">
form stuff
</div>
</div>
</div>
<div class="summary">
<div class="card">
<div class="title">Summary</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
<div class="subtitle">foo</div>
</div>
</div>
<div class="actions">
<div class="inner">
<div class="button">Back</div>
<div class="button">Next</div>
</div>
</div>
</div>

How to lock scroll snap one direction at a time?

I have created a calendar that displays each day in a column, and each day has multiple rows. I also added scroll snap to the grid. So the user can swipe horizontally to view each day. However due to the number of rows under the days, swiping (mobile) moves in both directions (vertically and horizontally). I'd like it to lock the swipe to go one direction at a time. So when the user swipes horizontally, the days move, once the day grid snaps in place, they can scroll vertically, or horizontally if they like. Here is my demo: https://codepen.io/starkana/pen/YzzBgPN
CSS & HTML
*,
:after,
:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
body {
color: #384ad2;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-size: 1.6rem;
height: 100%;
font-family: arial;
}
a {
text-decoration: none;
color: inherit;
}
body {
background: #ccc;
}
.calendar {
max-height: 100vh;
max-width: 100vh;
display: grid;
grid-template-columns: repeat(9, 80vw);
grid-column-gap: 20px;
scroll-snap-type: x mandatory;
padding-left: 5vw;
transition: transform 0.2s ease-in-out;
overflow-x: scroll;
justify-content: left;
}
.day {
margin-bottom: 100px;
min-width: 0;
scroll-snap-align: center;
}
.day h2 {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 0.1rem;
text-align: left;
text-transform: uppercase;
margin: 1rem 0;
}
.cards {
display: grid;
grid-row-gap: 6px;
grid-column-gap: 24px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
justify-content: center;
min-width: 0;
}
.card {
background: #fff;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(49, 54, 68, 0.05),
0 5px 20px rgba(49, 54, 68, 0.08);
max-height: 65px;
margin-bottom: 24px;
position: relative;
transition: box-shadow 0.6s ease, color 0.2s ease,
transform 0.2s ease-in-out;
}
.card:hover {
box-shadow: 0 4px 6px rgba(138, 155, 198, 0.05),
0 5px 25px rgba(82, 112, 194, 0.15);
}
.card:hover .highlighter {
opacity: 1;
}
.card a {
display: grid;
grid-template-columns: 50px auto;
}
.content {
padding: 10px 14px;
position: relative;
border: 1px solid red;
min-width: 0;
}
.title {
font-size: 1.4rem;
font-weight: 800;
overflow: hidden;
padding-bottom: 3px;
text-overflow: ellipsis;
white-space: nowrap;
}
.airing {
font-size: 1.3rem;
font-weight: 600;
opacity: 0.9;
}
.next,
.now {
background: blue;
border-radius: 4px;
top: -14px;
color: white;
font-size: 1.1rem;
font-weight: 800;
padding: 3px 8px;
position: absolute;
right: -12px;
}
.image {
border-radius: 4px 0 0 4px;
height: 100%;
max-height: 65px;
object-fit: cover;
object-position: center;
transition: opacity 0.3s;
width: 100%;
}
<div class="calendar">
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
<div class="day">
<h2>Monday</h2>
<div class="cards">
<div class="card">
<a href="#">
<img
src="/app/static/img/covers/large/12903-RSbXdLBGyI.jpg"
class="image"
/>
<div class="content">
<div class="title">Title</div>
<div class="airing">Subtitle</div>
</div>
</a>
</div>
</div>
</div>
</div>

How to let my mask do not overflow the panel?

I want to put my loading mask on the panel form.
The example below doesn't work as expected, the mask is overflowing the panel body. How do I make the mask width 100% of the panel body.
.mask {
position: absolute;
background-color: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
min-height: 150px;
z-index: 9999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mask .loading {
margin: 0 auto;
display: block;
background-color: #666666;
color: #ffffff;
width: 100px;
height: 100px;
padding-top: 20px;
padding-left: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h2>Panel Mask</h2>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" style="box-sizing: border-box;">
<div class="panel-body">
<div class="mask">
<span class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading...
</span>
</div>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="username">名稱</label>
<div class="col-md-4">
<input name="username" id="username" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="description">備註</label>
<div class="col-md-8">
<textarea class="form-control" id="description" name="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<button type="button" class="btn btn-default" (click)="save()">Update</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>

Add the top and left property to your mask.
Then, remove the width property, and add a 15px margin from the right (right: 15px), because the gutter of bootstrap containers is 15px.
And here you go.
.mask {
position: absolute;
background-color: rgba(102,102,102,0.5);
height: 100%;
min-height: 150px;
z-index: 9999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
top: 0;
left: 0;
right: 15px;
}
.mask .loading {
margin: 0 auto;
display: block;
background-color: #666666;
color: #ffffff;
width: 100px;
height: 100px;
padding-top: 20px;
padding-left: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-10 col-lg-offset-1"><h2>Panel Mask</h2></div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" style="box-sizing: border-box;">
<div class="panel-body">
<div class="mask">
<span class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading...
</span>
</div>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="username">名稱</label>
<div class="col-md-4">
<input name="username" id="username" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="description">備註</label>
<div class="col-md-8">
<textarea class="form-control" id="description" name="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" ></label>
<div class="col-md-8">
<button type="button" class="btn btn-default" (click)="save()" >Update</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>

bootstrap 4 body scrolling issue

I am using my university project for Flexbox Grid i added
<div class="header">
<div id="content-top">,<div id="content"> and<div class="footer">.
<div class="header"> is fixed, <div id="content"> can be scroll-y
and footer is fixed, they all are working but i have some issue, body always can scroll i am trying to hide body scroll using overflow: hidden; but its not work for me, cannot scroll content part, how can i fix it
Thanks
/* Show it is fixed to the top */
body #add-newbookings {
overflow: hidden;
}
#content {
max-height: calc(100% - 60px);
overflow-y: scroll;
padding: 0px 5% !important;
margin-top: 120px !important;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.bg-inverse {
background-color: grey!important;
}
.header {
width: 100%;
height:5%;
background:grey;
position:fixed;
top: 0;
}
.footer {
width: 100%;
height: 60px;
background: grey;
position: fixed;
bottom: 0;
}
.card {
position: initial;
}
#content-top {width: 100%;
margin-top: 2em;
padding:1.5%;
background:white;
position:fixed;
top: 0;}
/*--------------------------------------------------Add new booking ------------------------------------*/
/*add-newbooking text fileds*/
#add-newbooking .form-control {
display: block;
width: 100%;
padding: 0.1rem 0.75rem;
font-size: 1rem;
line-height: 1.25;
color: #464a4c;
background-color: #f4f4f5;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
/*add-newbooking creditcardbtn*/
#add-creditcard-btn .btn-primary {
color: #b89981;
background-color: #f4f4f5;
border-color: #f4f4f5;
}
/*/add-newbooking creditcardbtn*/
/*button cansel-confirm*/
#cancel-btn .btn-outline-secondary {
color: #343636;
width: 94%;
background-image: none;
background-color: #f4f4f5;
border-color: #f4f4f5;
margin: 0.5rem 0.5rem;
}
#confirm-btn .btn-outline-secondary {
olor: #ffffff;
width: 94%;
background-image: none;
background-color: #bda18b;
border-color: #bda18b;
margin: 0.5rem 0.5rem;
}
/*/button cansel-confirm*/
.add-text {color: #232323; font-size: 1.2em;}
/*add newbooking between textfilds space */
/*/add newbooking between textfilds space */
/*----------------------------------------------------/Add new booking ----------------------------------*/
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body id="add-newbookings">
<div class="header">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Dashboard</div>
<div class="p-2"></div>
<div class="p-2">Menu</div>
</div>
</div>
<div id="content-top">
<div class="add-text">
<div class="d-flex justify-content-center">Add New
</div>
</div>
</div>
<div id="contents">
<div id="add-newbooking">
<div class="card">
<div class="card-block">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">my</div>
<div class="p-2"> <div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">To</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">house
</div>
<div class="mr-auto p-2">Add
</div>
<div class="p-2">000
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Add
</div>
<div class="mr-auto p-2">Add
</div>
<div class="p-2">00.00
</div>
</div>
<hr>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Total A
</div>
<div class="p-2">00.00
</div>
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-block">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Name
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-name" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">city
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-mobile" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">country
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-email" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">email
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-notes" placeholder="">
</div>
</div>
</div>
</div></div>
<br>
<div class="card">
<div class="card-block">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">total
</div>
<div class="p-2">$00.00
</div>
</div>
<div class="d-flex flex-nowrap">
<div class="order-last p-2">
<div id="add-creditcard-btn">
<button type="button" class="btn btn-primary">Add home information</button></div>
</div>
<div class="p-2"></div>
<div class="order-first p-2"></div>
</div>
</div></div>
<div class="d-flex justify-content-end">
<div id="cancel-btn">
<button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>
<div id="confirm-btn">
<button type="button" class="btn btn-outline-secondary">Confirm</button>
</div>
</div>
</div>
</body>

what I have found in your code is a CSS issue. you have
body #add-newbookings {
overflow: hidden;
}
#add-newbookings /* will be considered as child element of body */
To solve it
either use
body#add-newbookings {
overflow: hidden;
}
#contents {
overflow: auto;
height: 100%;
}
or
body {
overflow: hidden;
}
#contents {
overflow: auto;
height: 100%;
}

Please correct <div id="contents"> as <div id="content"> and check.

Vertical center a <b> element inside a div

How to vertical center the tag names which are inside the div.
<div id="playerlist">
<div class="opponents_list"><b id="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">tom</b>
</div>
</div>
.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
vertical-align:middle;
}
.opponent_list_bold_name {
vertical-align:middle;
}
The fiddle for the above code is at http://jsfiddle.net/cvsn8cu8/. Using the css propery vertical-align:middle; did not work

You have the same ID instead of a class. The use the same line height as height
.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
vertical-align: middle;
}
.opponent_list_bold_name {
line-height: 3em;
}
<div id="playerlist">
<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
</div>
</div>
Alternative Option
You can set the parent to display:table and the b to display:table-cell then vertically align
Jfiddle Demo

.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
display: table;
}
b.opponent_list_bold_name {
display:table-cell;
vertical-align:middle;
height: 100%;
}
<div id="playerlist">
<div class="opponents_list"><b id="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b id="opponent_list_bold_name">tom</b>
</div>
</div>

Set a line-height:
.opponents_list {
/* your code */
line-height: 3em;
}

As mention ID must be unique. Use class instead. Also you can use display: table:
#playerlist {
display: table;
width: 100%;
text-align: center;
}
.opponents_list {
width: 100vw;
height: 3em;
margin: 0.1em auto;
background: #666;
vertical-align: middle;
display: table-row;
}
.opponent_list_bold_name {
vertical-align: middle;
display: table-cell;
}
<div id="playerlist">
<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
</div>
</div>

Resources