im trying to make bootstrap drop down menu but in it doesn't render as expected (the button to expand the menu is unclickable )
<div class="news-blocks mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 services-section">
<div class="inner">
<div class="inner-align">
<div class="row">
<div class="col-lg-4">
<h2 class="heading">
<i class="la la-gears"></i> الخدمات الإلكترونية </h2>
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="triggerId" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
تسجيل الشركة
</button>
<div class="dropdown-menu" aria-labelledby="triggerId">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
</div>
</div>
</div>
<div class="col-lg-8">
<p class="text">
text
</p>
<button type="button" class="arrow-btn btn btn-primary btn-lg">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the area highlited in red should be the dropdown menu but it is not
Related
I have card with dropdown menu like below
<div class="content d-flex">
<div class="ps-1 align-self-center">
<img src="#" class="rounded-circle shadow-l preload-img entered loading" data-ll-status="loading" width="45">
</div>
<div class="ps-2 align-self-center">
<h5 class="font-15 color-dark-dark">Jasdeep Singh <i class="fa fa-circle font-12 color-green-dark ms-1"></i></h5>
<p class="opacity-50 mt-n2 me-n1 font-13 mb-0">
Seen on 2022-05-09 10:52:36 </p>
</div>
<div class="ms-auto align-self-center">
<div class="dropdown">
<i class="fa fa-align-justify dropdown-toggle color-black me-2" data-toggle="dropdownMenu2" data-bs-toggle="dropdown"></i>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><button type="button" data-id="28" class="dropdown-item block_user" style="display:block">Block User</button></li>
<li><button type="button" data-id="28" class="dropdown-item unblock_user" style="display:none">Unblock User</button></li>
<li><button type="button" data-id="28" class="btn-link dropdown-item report_spam">Report Spam</button></li>
</ul>
</div>
</div>
</div>
Its all fine but dropdown menu getting cut like below image. I have tried many solution but not working. Let me know if any one here can help me for solve the puzzle.
Thanks!
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">
This is my View File which I am trying to use with my common layout code file _layout.
#model AttendanceManagement.Models.AttendanceModel
#{
ViewBag.Title = "Dashboard";
}
<h2>Attendance</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.UserRole, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserRole, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserRole, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Mobile, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Mobile, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Mobile, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#*#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}*#
This is the common _layout file which is used to set common layout for all views in project.I have set Render Body() below but still facing issues.
<!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>PAGE TITLE</title>
<!-- Custom fonts for this template-->
<link href="~/DashboardStyles/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" />
<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="~/DashboardStyles/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 - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Components</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="buttons.html">Buttons</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities" aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-wrench"></i>
<span>Utilities</span>
</a>
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Custom Utilities:</h6>
<a class="collapse-item" href="utilities-color.html">Colors</a>
<a class="collapse-item" href="utilities-border.html">Borders</a>
<a class="collapse-item" href="utilities-animation.html">Animations</a>
<a class="collapse-item" href="utilities-other.html">Other</a>
</div>
</div>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Addons
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item active">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse show" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item active" href="404.html">404 Page</a>
<a class="collapse-item" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- Nav Item - Charts -->
#*<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</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 -->
#RenderBody()
<!-- 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="https://source.unsplash.com/fn_BT9fwg_E/60x60" 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="https://source.unsplash.com/AU4VPcFN4LE/60x60" 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="https://source.unsplash.com/CS2uCrpNzJY/60x60" 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">Valerie Luna</span>
<img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
</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 -->
<!--ENTER PAGE CONTENT HERE-->
<!-- /.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="~/DashboardStyles/vendor/jquery/jquery.min.js"></script>
<script src="~/DashboardStyles/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="~/DashboardStyles/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="~/DashboardStyles/js/sb-admin-2.min.js"></script>
</body>
</html>
Every View content goes here and there in layout.So help me solve the issues.
I guess I have made a mistake in putting RenderBody() function it should come before Footer code.
Might be easiest if I point you here: http://bootsnipp.com/snippets/featured/user-profile-widget
What I am trying to do is align these side by side so that there are two per row...
I'm just completely confused with the order of the columns...
I guess any Bootstrap expert could please chime in with a suggestion? Thanks!
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="well well-sm">
<div class="row">
<div class="col-sm-6 col-md-4">
<img src="http://placehold.it/380x500" alt="" class="img-rounded img-responsive" />
</div>
<div class="col-sm-6 col-md-8">
<h4>
Bhaumik Patel</h4>
<small><cite title="San Francisco, USA">San Francisco, USA <i class="glyphicon glyphicon-map-marker">
</i></cite></small>
<p>
<i class="glyphicon glyphicon-envelope"></i>email#example.com
<br />
<i class="glyphicon glyphicon-globe"></i>www.jquery2dotnet.com
<br />
<i class="glyphicon glyphicon-gift"></i>June 02, 1988</p>
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-primary">
Social</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span><span class="sr-only">Social</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Twitter</li>
<li>Google +</li>
<li>Facebook</li>
<li class="divider"></li>
<li>Github</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Perhaps I'm not understanding the question, but it seems to work just fine when including two of them on the same row.
http://bootsnipp.com/user/snippets/M23j
I have a problem where I have these div boxes (.span4), they all remain inside a .row-fluid (which is the container with white background). The problem is that the boxes exceed their width and "stick out".
Is there some way to make the spacing between the .span4's to auto adjust to the container width?
See jsfiddle here:
http://jsfiddle.net/QcSqx/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="main-container">
<div class="row-fluid">
<div class="span12">
<h3 class="mycharacters">My characters</h3>
<div class="btn-group pull-right" data-toggle="buttons-radio">
<i class="icon-th-large"></i>
<i class="icon-list"></i>
</div>
<div class="btn-group pull-right">
<a class="add-character-button btn btn-success btn-small dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-plus icon-white"></i> Add character
</a>
<ul class="dropdown-menu">
<li>Add manually</li>
<li class="nav-header">Import</li>
<li>.dnd4e-file</li>
</ul>
</div>
<i class="icon-cog icon-white"></i> Back to Uberview
</div>
</div>
<div class="row">
<div class="span12" id="actor_result"><div class="row-fluid">
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Davius.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=1"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=1"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=1"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Davius</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>17/20hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">aaaaaaa
a
a
a</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">hehe
asa
sd
asd</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Awesome%20Maximus.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=3"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=3"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=3"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Awesomeson Maaaximilian</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>10/30hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">herro</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">lol</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Master%20Thief%20Sven.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=4"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=4"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=4"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Master Thief Sven</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>20/13hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Yeeeeeesss.....huh? ah! ...yeeees</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">wes</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/Giant%20Frederic.png"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=5"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=5"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=5"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">Giant Frederic</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/27hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Farting</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">I will cruuuush you!</div>
</div></div>
<div class="span4 well well-small"><div class="media">
<a class="pull-left" href="#"><img class="media-object img-circle actor" src="http://qnap.mcederman.com/images/avatar/actor/One%20eyed%20idiot.jpeg"></a><div class="overflow-media-body media-body">
<div class="btn-group pull-right">
<button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><span class="icon-cog"></span></button><ul class="dropdown-menu">
<li><a href="actor_profile?id=6"><i class="icon-pencil"></i> Edit
</a></li>
<li><a href="set_avatar_actor?id=6"><i class="icon-picture"></i> Change avatar
</a></li>
<li><a href="actorview?delete&id=6"><i class="icon-trash"></i> Delete
</a></li>
</ul>
</div>
<h4 class="media-heading">One eyed idiot</h4>
<div>
<i class="icon-heart"></i><strong> Health: </strong>25/35hp</div>
<br><br>
</div>
<div>
<i class="icon-fire"></i><strong> Effects: </strong>
</div>
<div id="actoreffects" class="actor-text">Rested</div>
<div>
<i class="icon-edit"></i><strong> Notes: </strong>
</div>
<div id="actornotes" class="actor-text">Can't see straight</div>
</div></div>
</div>
</div>
</div>
</div>
</div>
bootstrap puts padding and borders on the well class, which will make the span4s overflow when you add the well class to that div. my suggestion would be to nest the well classes within the span4 divs..
<div class="span4">
<div class="well well-small">
Contents of the div within the well
</div>
</div>
also, it looks like you tried putting 4 boxes on a line.. when you have 12 columns to work with, and you want to put 4 columns in a row-fluid row, you should use span3 (span3 * 4columns = 12 - full width)