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>
Related
I am trying to implement AdminLTE theme in my project. I am an intern and working with jsf+hibernate. I have been told to use adminlte theme and trying to work it out with jsf.
At the beginning I fixed the stylesheeet syntax and JS syntax. After that fixed the /> parts of the code to apply on JSF. Now everything is looking same except icons. I am trying to implement them same way as I implemented JS and CSS files but it does not work.
For example, code was:
<link rel="stylesheet" href="dist/css/adminlte.min.css">
and I am using it like:
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
It works when I'm use:
<h:graphicImage name ="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
instead of:
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
Icons look like this:
My template.xhtml:
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>AdminLTE 3 | Starter</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"/>
<h:outputStylesheet library="plugins/fontawesome-free/css" name="all.min.css" />
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
</h:head>
<h:body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
<form class="form-inline">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<h:graphicImage name="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
<span class="brand-text font-weight-light">PM System</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<h:graphicImage name ="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"/>
</div>
<div class="info">
Kullanıcı Adı
</div>
</div>
<!-- SidebarSearch Form -->
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2021 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<h:outputScript library="plugins/jquery" name="jquery.min.js"/>
<h:outputScript library="plugins/bootstrap/js" name="bootstrap.bundle.min.js"/>
<h:outputScript library="dist/js" name="adminlte.min.js"/>
</h:body>
</html>
can you try font awsome like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
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">
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>
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>
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>