I have the following screen which uses a layout page. This view displays a card and apply the Layout page. How do I position the tags About, Services and Our Work to the bottom of the screen.
What I have tried:
<footer class="container space-1">
<div class="row align-items-md-center text-center">
#*<div class="col-md-3 mb-4 mb-md-0">
<a href="#" aria-label="Front">
<img class="brand" src="https://template.tritonexpress.co.za/Images/Triton.png" alt="logo" width="120" />
</a>
</div>*#
<div class="col-sm-10 col-md-6 mb-4 mb-sm-0">
<!-- Nav List -->
<ul class="nav nav-sm nav-x-0 justify-content-center text-md-center">
<li class="nav-item px-3">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Our work</a>
</li>
</ul>
<!-- End Nav List -->
</div>
<div class="col-sm-5 col-md-3 text-sm-right">
<!-- Social Networks -->
<ul class="list-inline mb-0">
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
<i class="fab fa-google"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-xs btn-icon btn-soft-secondary rounded-circle" href="#">
<i class="fab fa-github"></i>
</a>
</li>
</ul>
<!-- End Social Networks -->
</div>
</div>
</footer>
Try adding this :
<div class="footer fixed-bottom"></div>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 months ago.
Improve this question
Helo, I want to target (a) element inside a css id to change all (a) color inside slidebar id**.
I tried to do this
<style>
#slidebar: a {
color: #fc7f03 !important;
}
</style>
but the color still blue not orange.
Full code:
<style>
#slidebar: a {
color: #fc7f03 !important;
}
</style>
<div id="slidebar">
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0" style=" background-image: linear-gradient(to top, #444444, #cccccc); border-radius: 30px;">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Website Name</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
<ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a>
</li>
<li>
<a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
<i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
<ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a>
<ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Product</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 2
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 3
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 4
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
<hr>
<div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
<span class="d-none d-sm-inline mx-1">Admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div class="col py-3">
Content area...
</div>
</div>
</div>
</div>
you can fix it by removing : from the style part
<style>
#slidebar a {
color: #fc7f03 !important;
}
</style>
good luck
im new to laravel and in my class project i want to take SB Admin2 template and use it on laravel, since i want to learn how is this made, i took the HTML version and made into sidebar, topbar and content components, rigth now im struggling with the side bar i made it dynamic so i can evaluate the role of the user and render the menus according to it, the sample nav-items work fine but my generated code doesn't, i can't see any diference, can someone give me an advice?
SIDEBAR GENERATED CODE
<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">
<div class="sidebar-brand-icon rotate-n-15">
<img src="http://127.0.0.1:8000/layout/img/rapidsoft_icon.png">
</div>
<div class="sidebar-brand-text mx-3">Rapisoft</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="http://127.0.0.1:8000/dashboard">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<li class="nav-item">
<a class="nav-link" href="/home">
<i class="fas fa-fw fa-chart-area"></i>
<span>Home</span></a>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/pages" data-toggle="collapse" data-target="#2collapsePages"
aria-expanded="true" aria-controls="2collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="2collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/portfolio">Portfolio</a>
<a class="collapse-item" href="/gallery">Gallery</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/our-services">
<i class="fas fa-fw fa-chart-area"></i>
<span>Our Services</span></a>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/about" data-toggle="collapse" data-target="#4collapsePages"
aria-expanded="true" aria-controls="4collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>About</span>
</a>
<div id="4collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/about-team">About Team</a>
<a class="collapse-item" href="/about-clients">About Clients</a>
</div>
</div>
</li>
<!--GENERATED CODE-->
<li class="nav-item">
<a class="nav-link collapsed" href="/contact" data-toggle="collapse" data-target="#9collapsePages"
aria-expanded="true" aria-controls="9collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Contact</span>
</a>
<div id="9collapsePages" class="collapse" aria-labelledby="headingPages"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="/contact-team">Contact Team</a>
<a class="collapse-item" href="/contact-clients">Contact Clients</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/pqr">
<i class="fas fa-fw fa-chart-area"></i>
<span>PQR</span></a>
</li>
<!--SAMPLE FROM SB ADMIN-->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Paginas</span>
</a>
<div id="collapsePages" class="collapse" 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" href="404.html">404 Page</a>
<a class="collapse-item" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- PARTE ESTATICA ABAJO -->
<!-- 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>
<!-- Sidebar Message -->
<div class="sidebar-card d-none d-lg-flex">
<img class="sidebar-card-illustration mb-2" src="http://127.0.0.1:8000/layout/img/undraw_rocket.svg"
alt="...">
<p class="text-center mb-2"> Aca van las notas que se deban tener para cada cliente!!!</p>
</div>
</ul>```
I found the problem, this is the code i was using to generate the menu:
#if ($menu->parent_id === 0 && $menu->ChCount() === 0)
<li class="nav-item">
<a class="nav-link" href="/{{$menu->slug}}">
<i class="fas fa-fw fa-chart-area"></i>
<span>{{$menu->menu_title}}</span></a>
</li>
#else
#if ($menu->parent_id === 0 and $menu->ChCount() > 0)
<li class="nav-item">
<a class="nav-link collapsed" href="/{{$menu->slug}}" data-toggle="collapse" data-target="#{{$menu->id}}collapsePages"
aria-expanded="true" aria-controls="{{$menu->id}}collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>{{$menu->menu_title}}</span>
</a>
<div id="{{$menu->id}}collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header"></h6>
#foreach($menu->children as $menu)
<a class="collapse-item" href="/{{$menu->slug}}">{{$menu->menu_title}}</a>
#endforeach
</div>
</div>
</li>
#endif
#endif
i found that the ID wasn't captured so it doesnt aplied any css to it, i changed this:
id="{{$menu->id}}collapsePages" for this id="collapse_id{{$menu->id}}" and problem solved.
For some reason Angulars is saying me that the close tags are wrong, and my page is now running for that errors, but I don't understand why, the close tags are fine I check tab for tab all the tags have one open tab and one close tags, I'm gone leave my code.
<div class="container-fluid">
<h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
<!-- Search form -->
<!-- Navbar links -->
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<!-- Sidenav toggler -->
<div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://seth.com/dashboard" role="button" >
<i class="fas fa-arrow-alt-circle-left"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- Signo pregunta -->
<i class="far fa-question-circle"></i>
</a>
<!-- Signo pregunta contenido-->
<div class="dropdown-menu dropdown-menu-m dropdown-menu-right py-0 overflow-hidden">
<!-- Dropdown header -->
<!-- List group -->
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Guía de inicio</p>
</div>
</div>
</a>
<!-- Tarea -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Políticas Privacidad</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Contactar asistencia</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Videocapacitaciones</p>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Hola </h6>
</div>
<a href="/vistas/profile" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>Ajustes de mi perfil</span>
</a>
<a href="../admin.php" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Consola de administrador</span>
</a>
<div class="dropdown-divider"></div>
<a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Cerrar sesión</span>
</a>
Ok this tags is what angular is saying me that I need to remove, it is with the last code block.
</li>
</ul>
</div>
</div>
</nav>
I closed the tags, but you have divs inside the links) replace with span, it will be more correct and set display:block in css
I recommend not using divs inside links! Replace with span.
see also
HTML:
<div class="container-fluid">
<h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
<!-- Search form -->
<!-- Navbar links -->
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<!-- Sidenav toggler -->
<div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://seth.com/dashboard" role="button">
<i class="fas fa-arrow-alt-circle-left"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- Signo pregunta -->
<i class="far fa-question-circle"></i>
</a>
<!-- Signo pregunta contenido-->
<div class="dropdown-menu dropdown-menu-m dropdown-menu-right py-0 overflow-hidden">
<!-- Dropdown header -->
<!-- List group -->
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Guía de inicio</p>
</div>
</div>
</a>
<!-- Tarea -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Políticas Privacidad</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Contactar asistencia</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Videocapacitaciones</p>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Hola </h6>
</div>
<a href="/vistas/profile" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>Ajustes de mi perfil</span>
</a>
<a href="../admin.php" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Consola de administrador</span>
</a>
<div class="dropdown-divider"></div>
<a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Cerrar sesión</span>
</a>
</div>
</li>
</ul>
</div>
I am new with HTML and i downloaded a template that uses Tabs and this is how is rendered:
So What I need is to when I click on "Próximo" it changes the tabs to the next or other that I choose.
I tried to do something like that, but it didn't worked! :
<button type="button" class="btn btn-danger nav-link" aria-expanded="true" href="#Legal" data-toggle="tab">
Próximo
</button>
The code :
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<a href="#CompanyData" data-toggle="tab" aria-expanded="false" class="nav-link active">
<i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i>
<span class="d-none d-lg-block">Dados da Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#Legal" data-toggle="tab" aria-expanded="true"
class="nav-link">
<i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i>
<span class="d-none d-lg-block">Cadastrar Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#listCompanies" data-toggle="tab" aria-expanded="false" class="nav-link">
<i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i>
<span class="d-none d-lg-block">Listar Empresas</span>
</a>
</li>
</ul>
And
<div class="tab-content">
<div class="tab-pane show active" id="CompanyData">
</div>
<div class="tab-pane " id="Legal">
</div>
<div class="tab-pane" id="listCompanies">
</div>
</div>
You can't make another buttons do the task of a tab button because internally bootstrap.js makes several changes to it. But what we can do is to simulate the click event and make the tab button click if we click our button.
Add a callback function on a click to our button as below
<button onclick="makeClick()" type="button" class="btn btn-danger nav-link" aria-expanded="true" href="#Legal" data-toggle="tab">
Próximo
</button>
Assign id to each li in list
<ul class="nav nav-tabs mb-3">
<li class="nav-item" >
<a href="#CompanyData" id="Dados" data-toggle="tab" aria-expanded="false" class="nav-link active">
<i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Dados da Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#Legal" id="Cadastrar" data-toggle="tab" aria-expanded="true"
class="nav-link">
<i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Cadastrar Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#listCompanies" id="Listar" data-toggle="tab" aria-expanded="false" class="nav-link">
<i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i><span class="d-none d-lg-block">Listar Empresas</span>
</a>
</li>
And in your JS file create the below function:
makeClick(){
$('#Listar').click(); //this will simulate the click and Listar tab will be opened
}
Code:
function makeClick() {
$('#Cadastrar').click();
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>
<ul class="nav nav-tabs mb-3">
<li class="nav-item">
<a href="#CompanyData" id="Dados" data-toggle="tab" aria-expanded="false" class="nav-link active">
<i class="mdi mdi-home-variant d-lg-none d-block mr-1"></i><span class="d-lg-block"> Dados da Empresa </span>
</a>
</li>
<li class="nav-item">
<a href="#Legal" id="Cadastrar" data-toggle="tab" aria-expanded="true" class="nav-link">
<i class="mdi mdi-account-circle d-lg-none d-block mr-1"></i><span class="d-lg-block">Cadastrar Empresa</span>
</a>
</li>
<li class="nav-item">
<a href="#listCompanies" id="Listar" data-toggle="tab" aria-expanded="false" class="nav-link">
<i class="mdi mdi-settings-outline d-lg-none d-block mr-1"></i><span class="d-lg-block">Listar Empresas</span>
</a>
</li>
<div class="tab-content">
<div class="tab-pane show active" id="CompanyData" role="tabpanel">
Dados da Empresa Tab
<button onclick="makeClick()" type="button" class="btn btn-danger nav-link" aria-expanded="true" href="#Legal" data-toggle="tab">Próximo
</button>
</div>
<div class="tab-pane " id="Legal" role="tabpanel">
Cadastrar Empresa Tab
</div>
<div class="tab-pane" id="listCompanies" role="tabpanel">
Listar Empresas Tab
</div>
</div>
I have a code: Codepen.io.
<div class="container-fluid h-100">
<div class="row wrapper h-100">
<aside class="col-12 col-sm-3 p-0 bg-dark">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
<a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
<a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
<span class="navbar-toggler-icon"></span>
</a>
<div class="collapse navbar-collapse sidebar">
<ul class="flex-column navbar-nav w-100 justify-content-between">
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
<i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
</a>
<div class="collapse" id="m1">
<ul class="flex-column nav">
<a class="nav-link px-0 text-truncate" href="#">Sub</a>
<a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
</li>
<li class="nav-item">
<a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
</li>
</ul>
</div>
</nav>
</aside>
<main class="col bg-faded py-3">
</main></div></div>
But I need to set fixed width left sidebar for all resolutions, except in mobile view I need to see like now (top menu with hamburger).
What I need to do?
Use a media query for Bootstrap's sm breakpoint and set min/max width in the "sidebar"...
#media (min-width: 768px) {
aside.col-sm-3 {
min-width: 200px;
max-width: 200px;
}
}
https://www.codeply.com/go/LsMGLozRq0
Also see: Bootstrap 4: responsive sidebar menu to top navbar