Hello,
<section class="card-body content_block_admin_dashboard_wrapper ">
<h1 class="card-title ">Dashboard</h1>
<div class="row m-2">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 p-2">
<div class="row align-items-center justify-content-center storage-space-operation">
<a class="" href="{{ url('/admin/check-in/create') }}">
Check In Client
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 p-2">
<div class="row align-items-center justify-content-center storage-space-operation">
<a class="" href="{{ url('/admin/box-rooms?action=check_out') }}">
Check Out
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 p-2">
<div class="row align-items-center justify-content-center storage-space-operation">
<a class="" href="{{ url('/admin/reserve/create') }}">
Reserve
</a>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 p-2">
<div class="row align-items-center justify-content-center storage-space-operation">
<a class="" href="{{ url('/admin/box-rooms?action=unreserve') }}">
Unreserve
</a>
</div>
</div>
</div>
<div class="row float-right m-4 mr-5">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 mr-5">
<button type="button" class="btn btn-danger btn-lg" onclick="javascript: backendDashboard.deleteAllData() ; return false;"><span
class="btn-label"><i class="fa fa-trash fa-submit-button"></i></span> Delete All Data
</button>
</div>
</div>
</section> <!-- class="card-body" -->
and it looks ok on big devices, but testing on middle devices all buttons are in one row without spacing between them https://prnt.sc/mqoph4 http://demo2.nilov-sergey-demo-apps.tk/admin/dashboard admin@demo.com 111111
Why error and how to fix it ?
Thanks!
PaulOB
February 27, 2019, 8:24pm
2
Hi,
You seem to be breaking a few of the bootstrap rules.
You can’t nest content unless you use the correct format which is that a column class needs to be a direct child of a row. You can’t add a row and not a column class.
You also seem to be over-riding the very grid structure by removing the margins and padding that make up the grid. The container, rows and column are built with padding and matching negative margins ion order to create gutters and generally you would not over-ride these. If you don’t want the grid then come out of your rows and columns and use your own containers and css. It is pointless to use the grid and then over-ride everything on it.
Your columns are overlapping because you gave them a fixed width of 300px so they have no option but to overlap when the screen space is not wide enough.
I suggest you go back to the bootstrap documentation and study the grid in detail before you start again so that you don’t make the same mistakes. Once you understand the grid fully then you are free to flout it and abuse it as you wish once you know the consequences.
To get you back on track with the grid try the following demo (copy it and test locally) to see if it behaves as you wish.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* DASHBOARD BLOCK START */
.storage-space-operation a {
color: white;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
text-decoration: none;
font-family: "Open Sans", Roboto;
background-color: #92C83D;
color: white;
/*width: 300px;*/
height: 200px;
border: 2px solid #92C83D;
font-size: x-large;
margin:0 0 10px;
transition: all .5s ease;
}
.storage-space-operation a:hover {
color: white;
text-decoration: none;
font-family: "Open Sans", Roboto;
background:#0F6;
}
</style>
</head>
<body>
<div class="container">
<section class="card-body content_block_admin_dashboard_wrapper ">
<h1 class="card-title ">Dashboard</h1>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 storage-space-operation"> <a class="" href="{{ url('/admin/check-in/create') }}"> Check In Client </a> </div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 storage-space-operation"> <a class="" href="{{ url('/admin/box-rooms?action=check_out') }}"> Check Out </a> </div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 storage-space-operation"> <a class="" href="{{ url('/admin/reserve/create') }}"> Reserve </a> </div>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 storage-space-operation"> <a class="" href="{{ url('/admin/box-rooms?action=unreserve') }}"> Unreserve </a> </div>
</div>
<div class="row float-right m-4 mr-5">
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 mr-5">
<button type="button" class="btn btn-danger btn-lg" onclick="javascript: backendDashboard.deleteAllData() ; return false;"><span class="btn-label"><i class="fa fa-trash fa-submit-button"></i></span> Delete All Data </button>
</div>
</div>
</section>
<!-- class="card-body" -->
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
At the least it should point you in the right direction towards your goal
4 Likes
system
May 30, 2019, 3:37am
3
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
