I'm creating the menu of a page in bootstrap 3.
This is my panel I have cretaed.
Here is my code of a panel I created:
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel mepanelo">
<div class="row ">
<div class="col-md-4 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="figurini.php">Figurini</a>
</li>
<li><a class="btn" role="button" href="mezzi.php">Mezzi Militari</a>
</li>
<li><a class="btn" role="button" href="accessori.php">Accessori</a>
</li>
<li><a class="btn" role="button" href="strumenti.php">Strumenti</a>
</li>
</ul>
</div>
<div class="col-md-4 big_list">
<ul class="list1 ">
<li><a class="btn" role="button" href="fantasy.php">Fantasy</a>
</li>
<li><a class="btn" role="button" href="aerei.php">Aerei</a>
</li>
<li><a class="btn" role="button" href="ambientazioni.php">Ambientazioni</a>
</li>
<li><a class="btn" role="button" href="edizioni.php">Edizioni</a>
</li>
</ul>
</div>
<div class="col-md-4 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="busti.php">Busti</a>
</li>
<li><a class="btn" role="button" href="navi.php">Navi</a>
</li>
<li><a class="btn" role="button" href="colori.php">Colori</a>
</li>
<li><a class="btn" role="button" href="occasioni.php">Occasioni</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
This panel and the lists inside it are responsive but the problem is that when the page is in the size of a tablet here is how the lists appear:
I don't want all that blank gray space there but I want all the elements to appear in 2 lists for tablet and not in one list. I proved something like hidden-sm but this hides the things. Is there a way to put all the eleemts which are in three lists just in 2 lists for tablet? Thanks!
use <div class="col-md-4 col-sm-4 big_list"> instead of <div class="col-md-4 big_list">
Change the class from col-md to col-sm
<div class="col-md-4 big_list">
to
<div class="col-sm-4 big_list">
You need to hide 3rd list only on tablet (small devices) and adjust elements of that list in other 2 lists and show that elements only on small devices. Read comments in code. And for bootstrap hidden and visible classes Check this.
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel mepanelo">
<div class="row ">
<div class="col-md-4 col-sm-6 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="figurini.php">Figurini</a>
</li>
<li><a class="btn" role="button" href="mezzi.php">Mezzi Militari</a>
</li>
<li><a class="btn" role="button" href="accessori.php">Accessori</a>
</li>
<li><a class="btn" role="button" href="strumenti.php">Strumenti</a>
</li>
<!-- follwing elements are hidden on all devices except small (tablets) -->
<li class="hidden-xs hidden-md hidden-lg">
<a class="btn" role="button" href="busti.php">Busti</a>
</li>
<li class="hidden-xs hidden-md hidden-lg">
<a class="btn" role="button" href="navi.php">Navi</a>
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6 big_list">
<ul class="list1 ">
<li><a class="btn" role="button" href="fantasy.php">Fantasy</a>
</li>
<li><a class="btn" role="button" href="aerei.php">Aerei</a>
</li>
<li><a class="btn" role="button" href="ambientazioni.php">Ambientazioni</a>
</li>
<li><a class="btn" role="button" href="edizioni.php">Edizioni</a>
</li>
<!-- follwing elements are hidden on all devices except small (tablets) -->
<li class="hidden-xs hidden-md hidden-lg"><a class="btn" role="button" href="colori.php">Colori</a>
</li>
<li class="hidden-xs hidden-md hidden-lg" ><a class="btn" role="button" href="occasioni.php">Occasioni</a>
</li>
</ul>
</div>
<div class="col-md-4 hidden-sm big_list"> <!-- hidden on small devices -->
<ul class="list1">
<li><a class="btn" role="button" href="busti.php">Busti</a>
</li>
<li><a class="btn" role="button" href="navi.php">Navi</a>
</li>
<li><a class="btn" role="button" href="colori.php">Colori</a>
</li>
<li><a class="btn" role="button" href="occasioni.php">Occasioni</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
I think the only problem is you are not including the bootstrap engine. Please see to it that you have properly linked your bootstrap files. Once that is done, this code should work fine.
<div class="col-sm-4 big_list">
Related
I've got a basic nav-tabs in Twitter Bootstrap and I've got an image after all of my tabs, that I'd like to float right. I've tried modifying its float, text-align, and other attributes, and even the pull-right class as mentioned on a separate but related SO question.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
<!-- ... -->
<img class="pull-right text-right float-right" src="myimg.png" width="32px" height="32px">
What Bootstrap class or CSS should I write to make my image float to the right?
(Bootstrap 4 if that matters)
<nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// from here you get all elements on right side
<ul class="list-inline">
<li class="list-inline-item">
<div class="frqst">
<button class="fas fa-users btn text-white"></button>
<div>
<ul class="list-group">
<li class="border-bottom">
<p>first right item
</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list-inline-item">
<button class="fas fa-comment btn text-white">second right item</button>
</li>
<li class="list-inline-item">
<p>third right item</p>
</li>
<li class="list-inline-item">
<img src="../../myimg.jpg">
</li>
<li class="list-inline-item">
<a class="text-white" href="./models/logout.html">Logout</a>
</li>
</ul>
</div>
</nav>
Put a div tag around the image and use d-flex justify-content-end like this:
<div class="row">
<div class="col-md-12">
<div class="">
<div class="">
<ul class="nav nav-pills w-100">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab"
aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="d-flex justify-content-end">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/09/f46bc1a6-9ffa-4434-a77a-ea1491d3597a-760x400.jpeg"
class="">
</div>
</div>
</div>
</div>
I tested this. Should work.
Another you can try:
<div class="col-md-12" style="border-top: 2px solid #000;">
<div class="mx-4">
<div class="footer pt-3">
<div class="row">
<div class="col-md-6">
<ul>
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff"
aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="float-right">
<img class="pull-right text-right float-right" src="http://placekitten.com/301/301" width="32px" height="32px">
</div>
</div>
</div>
</div>
</div>
</div>
I'm pretty sure I have the routing setup correctly within my application because when I type the correct path it takes me to and displays the correct information. Where I am having issues is the router link. I believe it has something to do with the HTML? When I click on each link nothing happens. Anyways I will post the HTML to see if someone can point out something I may be doing wrong. I've also got the github repository link here: https://github.com/jadenadams329/JIT1
<div class="app-bar-navbar vertical-appbar">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary app-bar-section pr-0 d-flex justify-content-start">
<button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" (blur)="displaySideNav = false">
<i class="icon-menu-bold"></i>
</button>
<span class="vertical-line-seperator left"> </span>
<div class="navbar-brand d-flex align-items-center">
<img src="assets/images/logo/secondary-logo-site.svg" class="logo-img">
<!-- <i class="icon-bd-logo-bold"></i> -->
<span class="brand-name">JIT Management Console</span>
</div>
<div class="navbar-right-content justify-content-end d-flex">
<div class="navbar-right-toggle d-flex">
<ul class="navbar-nav">
<li class="nav-item dropdown-appbar d-flex">
<span class="vertical-line-seperator left"> </span>
<a class="nav-link navbar-toggler" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="icon-more-bold text-white rotate-90"></i>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">
<li role="separator" class="dropdown-divider"></li>
<li class="nav-item">
Sign Out
</li>
</ul>
</li>
</ul>
</div>
<div class="custom-dropdown d-flex">
<ul class="navbar-nav">
<li class="nav-item dropdown-appbar d-flex">
<span class="vertical-line-seperator left"> </span>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">
<li>
Sign Out
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
</div>
<div>
<router-outlet></router-outlet>
</div>
What I expect to happen is when I click on the links that it shows the correct view so I do not have to type in the path each time.
You have blur event in button element. Currently It's removing the section element whenever you are focused out of button. remove that blur event from button and place click event on ui element and set the displaySidenav to false.
<button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" >
<i class="icon-menu-bold"></i>
</button>
<ul class="sidebar-links" (click)="displaySideNav = false">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
I cant select a dropdown in the dropdown box which has images in them in dropdown how to solve this isue jsfiddle
<div class="form-group">
<label class="col-md-4 control-label">Do you belong to the part of organisation ?</label>
<div class="col-md-4 selectContainer">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="http://lorempixel.com/75/50/abstract/">
Select
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Select a group </li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">women entrepreneurship branch
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">Tamilnadu Corporation for Development of Women
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">Mompreneur Circle
</li>
</ul>
</div>
</div>
</div>
i'm working on this website and as you can see i've a vertical left navigation. How can i move the navigations link left-bottom (only on desktop) like this?
<header class="span3">
<div class="affix">
<div class="navbar span3">
<div class="navbar-inner">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<i class="icon-reorder"></i>
</a>
<a class="brand span2" href="index.html">
<img alt="" src="img/logo.png">
</a>
<nav class="nav-collapse collapse">
<ul class="nav">
<li class="nav-home active">Home</li>
<li class="nav-about">Philosophie</li>
<li class="nav-services">Menu</li>
<li class="nav-team">Team</li>
<li class="nav-reservation">Reservation und Öffnungszeiten</li>
<li class="nav-private">Private Dining</li>
<li class="nav-kontakt">Kontakt und Anreise</li>
</ul>
</nav>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<!-- <aside class="span3 text-center hidden-phone">
<ul class="social inline">
<li><a class="btn btn-small" href="#"><i class="icon-facebook"></i></a></li>
<li><a class="btn btn-small" href="#"><i class="icon-twitter"></i></a></li>
<li><a class="btn btn-small" href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</aside> -->
</div><!-- /affix -->
</header>
#media(min-width:1024px)
{
/* your style for desktop */
}
I've set everything I need 100% to to 100% height but the sidebar still refuses to got to the bottom of the page when using Bootstrap 3.0. I've used the -9999px trick but that knocks out the dropdown I have in the navigation above it so I can't use that fix.
What I've tried instead is:
<div class="row-fluid fill">
<nav class="col-lg-2 fill">
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-piggy-bank navicon" aria-hidden="true"></span> Animal Care</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-user navicon" aria-hidden="true"></span> Customers</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-gift navicon" aria-hidden="true"></span> Donations</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-calendar navicon" aria-hidden="true"></span> Events</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-screenshot navicon" aria-hidden="true"></span> Marketing</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-briefcase navicon" aria-hidden="true"></span> Staff Mangement</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-globe navicon" aria-hidden="true"></span> Web Maintenance</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-shopping-cart navicon" aria-hidden="true"></span> Products & Stock</a><br />
</nav>
<div class="col-lg-10 content fill">
<h1>Dashboard</h1>
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
<div class="row-fluid">
<div class="col-lg-4 zookeeper excount">
10
</div>
<div class="col-lg-4 birdofprey excount">
10
</div>
<div class="col-lg-4 otherex excount">
1
</div>
</div>
<div class="row-fluid">
<div class="col-lg-4 exlabel">
Zoo Keeper Experiences
</div>
<div class="col-lg-4 exlabel">
Bird of Prey Experiences
</div>
<div class="col-lg-4 exlabel">
Other Events
</div>
</div>
<div class="row-fluid">
<div class="col-lg-12 dashtoday">
<h2>Today - 17th March 2015</h2>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist" id="dashTabs">
<li role="presentation" class="active">To-Do</li>
<li role="presentation">Keeper Log</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="todo">
<ul class="nav nav-pills nav-stacked dashtodo">
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="keeperlog">
<ul class="nav nav-pills nav-stacked dashtodo">
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="disabled">
To-Do Item Complete
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS I've added to Boostrap for the height is:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
The culprit was a form tag that has been inserted automatically by ASP.Net to render the controls. The simple fix was to change the CSS to:
html, body, form {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
The height now works as expected