Bootstrap Community, frontend Development

Good evening folks.

I'm working on a website in ASP .NET Core MVC.

The application uses a shared template, the template looks like this:

@using System.Diagnostics

@using Client.Application.Models.Gui.Elements

@using Client.Application.Repositories.JuryRepository.Contracts

@using Client.Application.Services.Data.Gui.Contracts

@using Microsoft.AspNetCore.Identity

@using Newtonsoft.Json

@inject IMenuStructureService _menuStructureService

@inject IMenuStructureRepository _menuStructureRepository

@inject UserManager<IdentityUser> _userManger

@{

List<MenuStructure> userMenus = null;

if (User.Identity.IsAuthenticated)

{

userMenus = new List<MenuStructure>();

var user = await _userManger.GetUserAsync(User);

var rolesArray = _userManger.GetRolesAsync(user).Result;

// Debug

Debug.WriteLine($"user = {JsonConvert.SerializeObject(user, Formatting.Indented)}");

Debug.WriteLine($"rolesArray = {JsonConvert.SerializeObject(rolesArray, Formatting.Indented)}");

foreach (var role in rolesArray)

{

var menuStructure = _menuStructureService.LoadCompleteMenuRole(role);

// Debug

Debug.WriteLine($"menuStructure = {JsonConvert.SerializeObject(menuStructure, Formatting.Indented)}");

if (menuStructure != null && menuStructure.Count > 0)

{

userMenus.AddRange(menuStructure);

}

}

// Debug

Debug.WriteLine($"userMenus = {JsonConvert.SerializeObject(userMenus, Formatting.Indented)}");

}

}

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>@ViewData["Title"] - Client Application</title>

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

<link rel="stylesheet" href="~/css/site.css" />

<!-- Our Custom CSS -->

<link rel="stylesheet" href="~/css/style.css">

<!-- Font Awesome JS -->

<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>

<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>

<script src="https://kit.fontawesome.com/612fd28750.js" crossorigin="anonymous"></script>

</head>

<body>

<div class="wrapper">

<!-- Sidebar -->

<nav id="sidebar">

<div class="sidebar-header">

<h3>Application</h3>

<strong>JT</strong>

</div>

<ul class="list-unstyled components">

<li class="active">

<a asp-area="" asp-controller="Home" asp-action="Index">

<i class="fas fa-home"></i>

Start

</a>

</li>

@{

if (User.Identity.IsAuthenticated)

{

if (userMenus != null)

{

foreach (var userMenu in userMenus)

{

// Debug

Debug.WriteLine($"userMenu = {JsonConvert.SerializeObject(userMenu)}");

var controlName = userMenu.MenuName + "SubMenu";

<li>

<a href="#@controlName" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">

<i class="fas fa-home"></i>

@userMenu.Caption

</a>

<ul class="collapse list-unstyled" id="@controlName">

@foreach (var menuItem in userMenu.MenuElements)

{

// Debug

Debug.WriteLine($"menuItem = {JsonConvert.SerializeObject(menuItem)}");

<li>

<a asp-area=@menuItem.AspArea asp-controller=@menuItem.AspController asp-action=@menuItem.AspAction>@menuItem.ElementName</a>

</li>

}

</ul>

</li>

}

}

}

}

</ul>

</nav>

<!-- Page Content -->

<div id="content">

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="container-fluid">

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="nav navbar-nav ml-auto">

<li class="nav-item">

<partial name="_LoginPartial" />

</li>

</ul>

</div>

</div>

</nav>

@RenderBody()

</div>

<footer class="border-top footer text-muted">

<div class="container">

&copy; 2021 - <i>Client</i>

</div>

</footer>

</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>

<!-- Popper.JS -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>

<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<script src="~/js/site.js" asp-append-version="true"></script>

<script type="text/javascript">

$(document).ready(function () {

$('#sidebarCollapse').on('click', function () {

$('#sidebar').toggleClass('active');

});

});

</script>

@await RenderSectionAsync("Scripts", required: false)

</body>

</html>

This uses 2 css files:

1. site.css

/ Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification

for details on configuring this project to bundle and minify static web assets. /

a.navbar-brand {

white-space: normal;

text-align: center;

word-break: break-all;

}

/ Provide sufficient contrast against white background /

a {

color: #0366d6;

}

.btn-primary {

color: #fff;

background-color: #1b6ec2;

border-color: #1861ac;

}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {

color: #fff;

background-color: #1b6ec2;

border-color: #1861ac;

}

/ Sticky footer styles

-------------------------------------------------- /

html {

font-size: 14px;

}

@media (min-width: 768px) {

html {

font-size: 16px;

}

}

.border-top {

border-top: 1px solid #e5e5e5;

}

.border-bottom {

border-bottom: 1px solid #e5e5e5;

}

.box-shadow {

box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);

}

button.accept-policy {

font-size: 1rem;

line-height: inherit;

}

/ Sticky footer styles

-------------------------------------------------- /

html {

position: relative;

min-height: 100%;

}

body {

/ Margin bottom by footer height /

margin-bottom: 60px;

}

.footer {

position: absolute;

bottom: 0;

width: 100%;

white-space: nowrap;

line-height: 60px; / Vertically center the text there /

}

.row-bordered {

position: relative;

}

.row-bordered:after {

content: "";

display: block;

border-bottom: 1px solid #ccc;

position: absolute;

bottom: 0;

left: 15px;

right: 15px;

}

2. Style.css

/

DEMO STYLE

/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

body {

font-family: 'Poppins', sans-serif;

background: #fafafa;

}

p {

font-family: 'Poppins', sans-serif;

font-size: 1.1em;

font-weight: 300;

line-height: 1.7em;

color: #999;

}

a,

a:hover,

a:focus {

color: inherit;

text-decoration: none;

transition: all 0.3s;

}

.navbar {

padding: 15px 10px;

background: #fff;

border: none;

border-radius: 0;

margin-bottom: 40px;

box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

}

.navbar-btn {

box-shadow: none;

outline: none !important;

border: none;

}

.line {

width: 100%;

height: 1px;

border-bottom: 1px dashed #ddd;

margin: 40px 0;

}

i,

span {

display: inline-block;

}

/ ---------------------------------------------------

SIDEBAR STYLE

----------------------------------------------------- /

.wrapper {

display: flex;

align-items: stretch;

}

#sidebar {

min-width: 250px;

max-width: 250px;

background: #7386D5;

color: #fff;

transition: all 0.3s;

}

#sidebar.active {

min-width: 80px;

max-width: 80px;

text-align: center;

}

#sidebar.active .sidebar-header h3,

#sidebar.active .CTAs {

display: none;

}

#sidebar.active .sidebar-header strong {

display: block;

}

#sidebar ul li a {

text-align: left;

}

#sidebar.active ul li a {

padding: 20px 10px;

text-align: center;

font-size: 0.85em;

}

#sidebar.active ul li a i {

margin-right: 0;

display: block;

font-size: 1.8em;

margin-bottom: 5px;

}

#sidebar.active ul ul a {

padding: 10px !important;

}

#sidebar.active .dropdown-toggle::after {

top: auto;

bottom: 10px;

right: 50%;

-webkit-transform: translateX(50%);

-ms-transform: translateX(50%);

transform: translateX(50%);

}

#sidebar .sidebar-header {

padding: 20px;

background: #6d7fcc;

}

#sidebar .sidebar-header strong {

display: none;

font-size: 1.8em;

}

#sidebar ul.components {

padding: 20px 0;

border-bottom: 1px solid #47748b;

}

#sidebar ul li a {

padding: 10px;

font-size: 1.1em;

display: block;

}

#sidebar ul li a:hover {

color: #7386D5;

background: #fff;

}

#sidebar ul li a i {

margin-right: 10px;

}

#sidebar ul li.active>a,

a[aria-expanded="true"] {

color: #fff;

background: #6d7fcc;

}

a[data-toggle="collapse"] {

position: relative;

}

.dropdown-toggle::after {

display: block;

position: absolute;

top: 50%;

right: 20px;

transform: translateY(-50%);

}

ul ul a {

font-size: 0.9em !important;

padding-left: 30px !important;

background: #6d7fcc;

}

ul.CTAs {

padding: 20px;

}

ul.CTAs a {

text-align: center;

font-size: 0.9em !important;

display: block;

border-radius: 5px;

margin-bottom: 5px;

}

a.download {

background: #fff;

color: #7386D5;

}

a.article,

a.article:hover {

background: #6d7fcc !important;

color: #fff !important;

}

/ ---------------------------------------------------

CONTENT STYLE

----------------------------------------------------- /

#content {

width: 100%;

padding: 20px;

min-height: 100vh;

transition: all 0.3s;

}

/ ---------------------------------------------------

MEDIAQUERIES

----------------------------------------------------- /

@media (max-width: 768px) {

#sidebar {

min-width: 80px;

max-width: 80px;

text-align: center;

margin-left: -80px !important;

}

.dropdown-toggle::after {

top: auto;

bottom: 10px;

right: 50%;

-webkit-transform: translateX(50%);

-ms-transform: translateX(50%);

transform: translateX(50%);

}

#sidebar.active {

margin-left: 0 !important;

}

#sidebar .sidebar-header h3,

#sidebar .CTAs {

display: none;

}

#sidebar .sidebar-header strong {

display: bl

ock;

}

#sidebar ul li a {

padding: 20px 10px;

}

#sidebar ul li a span {

font-size: 0.85em;

}

#sidebar ul li a i {

margin-right: 0;

display: block;

}

#sidebar ul ul a {

padding: 10px !important;

}

#sidebar ul li a i {

font-size: 1.3em;

}

#sidebar {

margin-left: 0;

}

#sidebarCollapse span {

display: none;

}

}

The client wants the contents of the entire page to be visible on 1 screen, without having to scroll. At the moment that's possible by zooming in the browser, but there must be a better way.

Anyone knows a way how to have the page center and fit inside 1 screen, using bootstrap?

fysicus () - 1 week ago - Reply 0