Firts of all i dont want to change responsive desing. I have 3 questons and thank you for your helps.
I need 2 lines in the button. 1st line text is "XXX Pump" and 2nd line is "P01" and the lines shouldnt mix.
When i give a very long text button is going bigger then normal size (see 5th button)
The space between the buttons are so much. I created a div for each button for responsive design. But i couldnt give less space.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="index.css">
<title>S7-1200 WEB SERVER</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Manual Control <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heassssssssssssssting Pump</span>
PU01
</a>
</div>
</div>
</div>
<div class="col-lg-2">
<div class="col-lg-12">
<div class="hero-button text-center">
<a href="#" class="btn btn-large btn-danger">
<span style="font-size:smaller;">Pre Heating Pump</span>
PU01
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
For 1st question you can use .d-block class from display utilities as an alternative to <br> line break.
Example:
<a class="btn btn-primary">
<span class="d-block">Pre Heating Pump</span>
<span class="d-block">PU01</span>
</a>
Related
I have created an MVC app in which the file _Layout.cshtml applies to all views, but the styles do only apply to the home view. So for instance I have provided two screenshots of my web app. One of the home view, in which clearly the CSS stylesheet is applied, but in contrast, the create view has the same Layout but without the CSS styles. I have tried searching for a solution for this issue but could unfortunately not find anything that would resolve it. I am running ASP.NET core 5.0 on Mac OS.
This is a screenshot of the Home View:
This is a screenshot of my Create-page
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Blank</title>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
<!-- Nav Item - Charts -->
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">
<span>Home</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">
<span>Privacy</span>
</a>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
<li class="nav-item dropdown no-arrow d-sm-none">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
aria-labelledby="searchDropdown">
<form class="form-inline mr-auto w-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small"
placeholder="Search for..." aria-label="Search"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<!-- Nav Item - Alerts -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<!-- Counter - Alerts -->
<span class="badge badge-danger badge-counter">3+</span>
</a>
<!-- Dropdown - Alerts -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">
Alerts Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-primary">
<i class="fas fa-file-alt text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 12, 2019</div>
<span class="font-weight-bold">A new monthly report is ready to download!</span>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-success">
<i class="fas fa-donate text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 7, 2019</div>
$290.29 has been deposited into your account!
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-warning">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 2, 2019</div>
Spending Alert: We've noticed unusually high spending for your account.
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
<!-- Nav Item - Messages -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<!-- Counter - Messages -->
<span class="badge badge-danger badge-counter">7</span>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Message Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="img/undraw_profile_1.svg"
alt="...">
<div class="status-indicator bg-success"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate">
Hi there! I am wondering if you can help me with a
problem I've been having.
</div>
<div class="small text-gray-500">Emily Fowler · 58m</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="img/undraw_profile_2.svg"
alt="...">
<div class="status-indicator"></div>
</div>
<div>
<div class="text-truncate">
I have the photos that you ordered last month, how
would you like them sent to you?
</div>
<div class="small text-gray-500">Jae Chun · 1d</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="img/undraw_profile_3.svg"
alt="...">
<div class="status-indicator bg-warning"></div>
</div>
<div>
<div class="text-truncate">
Last month's report looks great, I am very happy with
the progress so far, keep up the good work!
</div>
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"
alt="...">
<div class="status-indicator bg-success"></div>
</div>
<div>
<div class="text-truncate">
Am I a good boy? The reason I ask is because someone
told me that people say this to all dogs, even if they aren't good...
</div>
<div class="small text-gray-500">Chicken the Dog · 2w</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
<img class="img-profile rounded-circle"
src="img/undraw_profile.svg">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<main role="main" class="pb-3">
<div class="container-fluid">
#RenderBody()
</div>
</main>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="wwwroot/vendor/jquery/jquery.min.js"></script>
<script src="wwwroot/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="wwwroot/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="wwwroot/vendor/js/sb-admin-2.min.js"></script>
#await RenderSectionAsync("Scripts", required: false)
</body>
</html>
Create.cshtml
#model IssueTracker.Models.Issue
#{ ViewData["Title"] = "Create"; }
<h1>Create</h1>
<h4>Issue</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Submitter" class="control-label"></label>
<input asp-for="Submitter" class="form-control" />
<span asp-validation-for="Submitter" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="AssignedDev" class="control-label"></label>
<input asp-for="AssignedDev" class="form-control" />
<span asp-validation-for="AssignedDev" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Status" class="control-label"></label>
<input asp-for="Status" class="form-control" />
<span asp-validation-for="Status" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Created" class="control-label"></label>
<input asp-for="Created" class="form-control" />
<span asp-validation-for="Created" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Project" class="control-label"></label>
<input asp-for="Project" class="form-control" />
<span asp-validation-for="Project" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Priority" class="control-label"></label>
<input asp-for="Priority" class="form-control" />
<span asp-validation-for="Priority" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Type" class="control-label"></label>
<input asp-for="Type" class="form-control" />
<span asp-validation-for="Type" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
_ViewStart.cshtml
#{ Layout = "~/Views/Shared/_Layout.cshtml"; }
Screenshot of my Project directory
Try this in _ViewStart.cshtml
#{
Layout = "_Layout";
}
and check if in _ViewImports.cshtml you have something like:
#using IssueTracker
#using IssueTracker.Models
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
and you have all the CSS with a file related path instead of a project related path :
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
should be
<link href="~/css/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
I'm designing a dashboard and trying to have 2 divs (Bootstrap Card) made the same height in the same row container div. Have been googling a few solutions on SO, copy and paste those solutions but can't seem to get it right. I'm trying to have the "Resignation Breakdown" div the same height as "Resignation in {month}" div when the screen is lg (large) or more in bootstrap 4.
#resign-widget.row.col-lg-4.card {
height = 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
<link rel="stylesheet" type="text/css" href="dashboard.css">
<title>Dashboard</title>
</head>
<body>
<!-- Setting up the Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
<!-- Button for expanding and collapsing the Navbar Menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar elements -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Quick Action
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Dashboard Top Software Menu -->
<div id="software" class="container-fluid">
<div class="card-deck">
<div class="card" style>
<img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Unit4 Prosoft</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
<p class="card-text">All HR-related data are collected from here</p>
Login to Prosoft
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Salesforce</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
<p class="card-text">All sales and customer related data collected here</p>
Login to Salesforce
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 1 min ago</small>
</div>
</div>
<div class="card">
<img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Xero</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
<p class="card-text">All AP/AR related data are collected from here</p>
Login to Xero
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 15 mins ago</small>
</div>
</div>
</div>
</div>
<!-- Site seperator for clearer look -->
<div id="site-seperator"></div>
<!-- Dashboard body widgets of data -->
<div id="resign-widget" class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Resignation in {month}</h5>
<p class="card-text">{number} employee(s) resigned in {month}.</p>
</div>
<canvas id="myChart"></canvas>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Resignation Breakdown</h5>
<p class="card-text">Resignation numbers by department</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- All javascript for HTML outside of body -->
<script src="mdb.js"></script><script src="resignation.js"></script>
</html>
You can just set the height of the cards to be the 100% of their parent elements, the cols in this case. Since both the cols are of the same height, this technique will work.
#resign-widget.row.col-lg-4.card {
height = 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.7.0"></script>
<link rel="stylesheet" type="text/css" href="dashboard.css">
<title>Dashboard</title>
</head>
<body>
<!-- Setting up the Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#">BI Dashboard</a>
<!-- Button for expanding and collapsing the Navbar Menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar elements -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Quick Action
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Dashboard Top Software Menu -->
<div id="software" class="container-fluid">
<div class="card-deck">
<div class="card" style>
<img src="https://3bohsk43ipkewyk0v1ajbz21-wpengine.netdna-ssl.com/nz/wp-content/uploads/sites/3/2018/08/prosoft-u4-hrms.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Unit4 Prosoft</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Human Resource Management System</h6>
<p class="card-text">All HR-related data are collected from here</p>
Login to Prosoft
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="https://www.onlinemarketplaces.com/ext/resources/-1GOMS/Jobs/Misc/salesforce.png?1576025262" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Salesforce</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Customer Relations Management Software</h6>
<p class="card-text">All sales and customer related data collected here</p>
Login to Salesforce
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 1 min ago</small>
</div>
</div>
<div class="card">
<img src="https://cloudease.com.au/wp-content/uploads/2015/10/opengraph.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="h5 card-title"><span>Xero</a></span></h5>
<h6 class="card-subtitle mb-2 text-muted">Accounting Management Software</h6>
<p class="card-text">All AP/AR related data are collected from here</p>
Login to Xero
</div>
<div class="card-footer">
<small class="text-muted">Database last updated 15 mins ago</small>
</div>
</div>
</div>
</div>
<!-- Site seperator for clearer look -->
<div id="site-seperator"></div>
<!-- Dashboard body widgets of data -->
<div id="resign-widget" class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Resignation in {month}</h5>
<p class="card-text">{number} employee(s) resigned in {month}.</p>
</div>
<canvas id="myChart"></canvas>
</div>
</div>
<div class="col-lg-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Resignation Breakdown</h5>
<p class="card-text">Resignation numbers by department</p>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- All javascript for HTML outside of body -->
<script src="mdb.js"></script><script src="resignation.js"></script>
</html>
I just started learning Bootstrap. Now I'm trying to replicate an old design which I've made using tables. Below the design I want to get
But unfortunately my Bootstrap skill kills me at this
The D rows [D1, D2] are not aligned, which I want. Below the code I've used [taken from examples of Bootstrap]
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v3.8.5">
<title>Jumbotron Template ยท Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="https://getbootstrap.com/docs/4.2/examples/jumbotron/jumbotron.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</li>
</ul>
<div class="alert alert-success">
<strong>A</strong>
</div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1 class="display-3">B</h1>
<p>This is a template </p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-4"> <div class="alert alert-success"> C</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D1</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D2</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">E</span>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"><\/script>')</script><script src="https://getbootstrap.com/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
</html>
This...
<div class="row mb-2">
<div class="col-md-4">
<div class="alert alert-success"> C</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D1</div>
</div>
<div class="col-md-8">
<div class="alert alert-warning"> D2</div>
</div>
</div>
...has to be:
<div class="row mb-2">
<div class="col-md-4">
<div class="alert alert-success"> C</div>
</div>
<div class="col-md-8">
<div class="row mb-2">
<div class="col-12">
<div class="alert alert-warning"> D1</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12">
<div class="alert alert-warning"> D2</div>
</div>
</div>
<div class="row mb-2">
<div class="col-12">
<div class="alert alert-warning"> etc...</div>
</div>
</div>
</div>
</div>
The correct layout is:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section class="jumbotron">
<div class="container">
jumbotron
</div>
</section>
<div class="container">
<div class="row">
<div class="col-md-4">
left column
</div>
<div class="col-md-8">
<div class="row">
<div class="col-12">content 1</div>
<div class="col-12">content 2</div>
</div>
<div class="row">
<div class="col-6">content 3.1</div>
<div class="col-6">content 3.2</div>
</div>
<div class="row">
<div class="col-md-4">content 4.1</div>
<div class="col-md-8">content 4.2 (5 below md)</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row">
<div class="col-12">
footer content...
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
The accordion panel looks like this
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
The content is displayed below the button.
How do I move the collapse panel to the right side of the button? As shown below
if you are using bootstrap then do it in proper way, using rows and cols. This way you will get responsive layout too.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="row">
<div class="col-auto">
<a class="btn btn-primary btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</div>
<div class="col">
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>
</div>
You can wrap this in a div and give class d-flex and give flex-grow-1 to collapse
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="d-flex">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse flex-grow-1" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>
I'm trying make a link from an <a> to a <div>, but I can't do this link. In the code your can see how the destination are inside a section/div/div/div/div/div/. When i do a link to a section i haven't problem, but in this case i can't do it. I'm using two styles from bootstrap.
I would do a link from <a href="#tabmotora" ...>LEE MÁS</a> to <div class="tab-pane fade" id="tabmotora"><section id="tabmotorasec"...>. How can i do it?
My html:
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solutions</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/creative.min.css" rel="stylesheet">
<link href="css2/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css2/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css2/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="index.html">Oiko Tec</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="about.html">Equipo</a>
</li>
<li>
<a class="page-scroll" href="premios.html">Trayectoria</a>
</li>
<li class="dropdown">
Catálogo <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Productos
</li>
<li>
Servicios
</li>
<li>
Servicios Adicional
</li>
</ul>
</li>
<li>
Contacta
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section class="bg-primary" id="about" style="background-color:#FAAC58; padding: 0px;" class="clear_fix">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Servicios
<!--<small>Equipo</small>-->
</h1>
<ol class="breadcrumb">
<li><b>Home</b>
</li>
<li class="active"><b>Servicios</b></li>
</ol>
</div>
</div>
</div>
</section>
<section id="texto-top" style="padding: 30px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Servicios para huéspedes</h2>
<p>...................................................................................................................</p>
</div>
</div>
</div>
</section>
<section id="tipos" class="bg-primary" style="background-color:#FAAC58; padding: 0px;" class="clear_fix">
<div class="container" style="background-color:#FAAC58; color:#000">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header" style="color:#FFF">Panel de Servicios</h2>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-low-vision fa-stack-1x fa-inverse" style="color:#D18A58"></i>
</span>
</div>
<div class="panel-heading">
<h4>Discapacidad Visual</h4>
<p>Guía virtual interactivo para orientarte en las instalaciones hotel.</p>
LEE MÁS
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-wheelchair fa-stack-1x fa-inverse" style="color:#D18A58"></i>
<!-- <i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-car fa-stack-1x fa-inverse" style="color:#D18A58"></i>-->
</span>
</div>
<div class="panel-heading">
<h4>Discapacidad motora</h4>
<p>Control por voz de las instalaciones a través de tu smartphone.</p>
<a href="#tabmotora" class="btn btn-default" >LEE MÁS</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-deaf fa-stack-1x fa-inverse" style="color:#D18A58"></i>
</span>
</div>
<div class="panel-heading">
<h4>Discapacidad Auditiva</h4>
<p>Sistema de seguridad por alertas en tu móvil y pulsera vibratoria.</p>
LEE MÁS
</div>
</div>
</div>
</div>
</div>
</section>
<section id="categorias" style="padding: 30px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Tabs de servicios</h2>
</div>
<div class="col-lg-12">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><i class="fa fa-low-vision"></i> Discapacidad Visual
</li>
<li class=""><i class="fa fa-wheelchair"></i> Discapacidad Motora
</li>
<li class=""><i class="fa fa-deaf"></i> Discapacidad auditiva
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="tabvisual">
<h4></h4></br>
<p>...................................................................................................................</p>
</div>
<div class="tab-pane fade" id="tabmotora"><section id="tabmotorasec" style="padding:0px; border: 0px; ">
<h4></h4></br>
<p>...................................................................................................................</p>
</div>
<div class="tab-pane fade" id="tabauditiva">
<h4></h4></br>
<p>...................................................................................................................</p>
</div>
</div>
</div>
</div>
</div>
</section>
Thank you!!
Update your link with adding data-toggle="tab" :
LEE MÁS
and add the javascript:
<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = this.href.split('#');
$('.nav a').filter('a[href="#'+target[1]+'"]').tab('show');
})
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="index.html">Oiko Tec</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="about.html">Equipo</a>
</li>
<li>
<a class="page-scroll" href="premios.html">Trayectoria</a>
</li>
<li class="dropdown">
Catálogo <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Productos
</li>
<li>
Servicios
</li>
<li>
Servicios Adicional
</li>
</ul>
</li>
<li>
Contacta
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section class="bg-primary" id="about" style="background-color:#FAAC58; padding: 0px;" class="clear_fix">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Servicios
<!--<small>Equipo</small>-->
</h1>
<ol class="breadcrumb">
<li><b>Home</b>
</li>
<li class="active"><b>Servicios</b></li>
</ol>
</div>
</div>
</div>
</section>
<section id="texto-top" style="padding: 30px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Servicios para huéspedes</h2>
<p>...................................................................................................................</p>
</div>
</div>
</div>
</section>
<section id="tipos" class="bg-primary" style="background-color:#FAAC58; padding: 0px;" class="clear_fix">
<div class="container" style="background-color:#FAAC58; color:#000">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header" style="color:#FFF">Panel de Servicios</h2>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-low-vision fa-stack-1x fa-inverse" style="color:#D18A58"></i>
</span>
</div>
<div class="panel-heading">
<h4>Discapacidad Visual</h4>
<p>Guía virtual interactivo para orientarte en las instalaciones hotel.</p>
LEE MÁS
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-wheelchair fa-stack-1x fa-inverse" style="color:#D18A58"></i>
<!-- <i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-car fa-stack-1x fa-inverse" style="color:#D18A58"></i>-->
</span>
</div>
<div class="panel-heading">
<h4>Discapacidad motora</h4>
<p>Control por voz de las instalaciones a través de tu smartphone.</p>
LEE MÁS
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default text-center">
<div class="panel-body">
<span class="fa-stack fa-5x">
<i class="fa fa-circle fa-stack-2x text-primary" style="color:#FFF"></i>
<i class="fa fa-deaf fa-stack-1x fa-inverse" style="color:#D18A58"></i>
</span>
</div>
<div class="panel-heading">
<h4>Discapacidad Auditiva</h4>
<p>Sistema de seguridad por alertas en tu móvil y pulsera vibratoria.</p>
LEE MÁS
</div>
</div>
</div>
</div>
</div>
</section>
<section id="categorias" style="padding: 30px;">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header">Tabs de servicios</h2>
</div>
<div class="col-lg-12">
<ul id="myTab" class="nav nav-tabs nav-justified">
<li class="active"><i class="fa fa-low-vision"></i> Discapacidad Visual
</li>
<li class=""><i class="fa fa-wheelchair"></i> Discapacidad Motora
</li>
<li class=""><i class="fa fa-deaf"></i> Discapacidad auditiva
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="tabvisual">
<h4></h4></br>
<p>...................................................................................................................</p>
</div>
<div class="tab-pane fade" id="tabmotora"><section id="tabmotorasec" style="padding:0px; border: 0px; ">
<h4></h4></br>
<p>...................................................................................................................</p>
</div>
<div class="tab-pane fade" id="tabauditiva">
<h4></h4></br>
<p>...................................................................................................................</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = this.href.split('#');
$('.nav a').filter('a[href="#'+target[1]+'"]').tab('show');
})
</script>