page level and element scrollbar - html

Following is fiddle: http://plnkr.co/edit/peQEGK4mNiPBqlknrO6V?p=preview
code is :
<div id="navBar">
<nav id="nav" class="side-nav">
<!--<ul>
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>
<li>menuitem 1</li>
<li>menuitem 2</li>
<li>menuitem 3</li>
<li>menuitem 4</li>
<li>menuitem 5</li>
<li>menuitem 6</li>-->
<ul id="nav-contain" aria-live="polite" title="navigation menu" tabindex="-1">
<li class="menu-home main-menu closed">
<a href="#" >
<p >Menu Level 1</p>
</a>
</li>
<li class="main-menu closed" >
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed" >
<a href="javascript:void(0);" >
<p>Menu</p>
</a>
<ul class="expand" >
<li class="main-menu" >
<a href="#">
<p>Menu</p>
</a>
</li>
</ul>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
<li class="main-menu closed">
<a href="#" >
<p>Menu Level 1</p>
</a>
</li>
</ul>
</nav>
</div>
If we look at output there are 2 scrolls one is page level scroll and other is element level scroll. I want only one scroll bar that is page level scroll.


#viewport
{
min-height: 100%;
overflow-x: hidden;
position: relative;
width: 100%;
}
Remove position property from this css id.

Related

HTML How do I get the dropdown menu to be set in one place for all options?

I'm trying to get the dropdown menu to appear in one place for all the options.
I want the dropdown menu to appear as it does for the 'Main 1' option (same position).
Currently, when I hover over the options, the menu appears in line for each 'Main' (Main 2, Main 3 etc) option, however I would like them all to all trigger the dropdown menu to appear exactly where 'Main 1' dropdown menu appears. I tried changing 'position: fixed' from 'position:relative' but the menu doesn't appear at all.
HTML:
<div class="sidebar_menu">
<ul class="sidebar_menu_list">
<li class="sidebar_menu_item">
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 1</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="sidebar_menu_item">
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 2</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="sidebar_menu_item">
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 3</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="sidebar_menu_item">
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 4</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="sidebar_menu_item">
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 5</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="sidebar_menu_item">
<a href=""><label class="sidebar_menu_label" for="sidebar_menu">Main 6</label>
</a>
<ul id="lp_test_pop_up">
<div class="lp_test_popup_box">
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 1</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 2</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 3</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 4</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 5</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="lp_category_item">
<h3 id="lp_category_subheading">Sub-Item 6</h3>
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
</div>
CSS
.sidebar_menu_list {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;
}
.sidebar_menu_item {
padding: 10px;
position: relative;
width: 250px;
background-color: #fcfcfc;
border-top: 1px solid #e4e8ea;
}
.sidebar_menu_item:hover {
box-shadow: 0 0 4px 0 rgb(0 0 0 / 12%);
position: relative;
}
#lp_test_pop_up {
transform: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 100%;
top: -2%;
}
.sidebar_menu_item:hover #lp_test_pop_up {
cursor: pointer;
opacity: 1;
visibility: visible;
z-index: 9997;
}
.sidebar_menu ul li a {
font-size: 14px;
color: black;
text-decoration: none;
}
#lp_test_pop_up {
width:634px;
padding: 20px;
padding-bottom: 10px;
background-color: white;
box-shadow: 1px 2px 8px grey;
}
.sidebar_menu ul li ul ul {
width: 134px;
margin:15px 0px;
list-style-type:none;
padding:0px;
}
.sidebar_menu ul li ul li {
min-width: 250px;
border: none;
}
label.sidebar_menu_label {
font-size: 14px;
margin-left: 10px;
color: black;
}
.lp_test_popup_box {
display: flex;
flex-wrap: wrap;
}
.lp_category_item {
width: 33%;
height: 125px;
}
#lp_category_subheading{
margin:0px;
}
.lp_category_item{
margin-bottom:20px;
}
.lp_category_item ul li{
margin:2px 0px;
}

I took a little liberty in redoing your HTML and I simplified your CSS, but I think have gotten what you're looking for. You want to have your menus unhide and display in the same place no matter which line item you hover over. In the CSS, I have set the positioning of the target div which I think you are having some trouble with. Hope this helps you some.
A better working example can be found on Stackblitz
body {
font-family: sans-serif;
}
/* setting the positioning of the target here allows static display of the options */
.target {
width: 350px;
padding: 20px;
display: none;
position: relative;
box-shadow: 1px 2px 8px grey;
}
.target ul {
padding: 0;
list-style-type: none;
}
.target li {
margin: 0;
padding: 0px 0px 0px 0px;
}
li span {
cursor: pointer;
}
/* this is the important part here. the targets are the child of the hover element */
li span:hover + div.target {
position: absolute;
display: block;
top: 60px;
left: 200px;
}
header {
font-weight: bold;
}
header,
.row {
display: flex; /* aligns all child elements (flex items) in a row */
}
.col {
flex: 1; /* distributes space on the line equally among items */
}
<ul>
<li><span>Main - Item 1</span>
<div class="target">
<section>
<header>
<div class="col">Sub-Item 1 A </div>
<div class="col">Sub-Item 1 B</div>
<div class="col">Sub-Item 1 C</div>
</header>
<div class="row">
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</section>
</li>
<li><span>Main - Item 2</span>
<div class="target">
<section>
<header>
<div class="col">Sub-Item 2 A</div>
<div class="col">Sub-Item 2 B</div>
<div class="col">Sub-Item 2 C</div>
</header>
<div class="row">
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</section>
</div>
</li>
<li><span>Main - Item 3</span>
<div class="target">
<section>
<header>
<div class="col">Sub-Item 3 A</div>
<div class="col">Sub-Item 3 B</div>
<div class="col">Sub-Item 3 C</div>
</header>
<div class="row">
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</section>
</div>
</li>
<li><span>Main - Item 4</span>
<div class="target">
<section>
<header>
<div class="col">Sub-Item 4 A</div>
<div class="col">Sub-Item 4 B</div>
<div class="col">Sub-Item 4 C</div>
</header>
<div class="row">
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
<div class="col">
<ul>
<li>choice 1</li>
<li>choice 2</li>
<li>choice 3</li>
<li>choice 4</li>
<li>choice 5</li>
</ul>
</div>
</div>
</section>
</div>
</li>
</ul>

How set class in include html file using jsp

I have included header.html in index.jsp using
<%# include file="include_files/header.html" %>
Now I want to include same header on multiple pages but the active tab should be set to different tab each time.
Please suggest.
The Header.html has this ul.
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<h1 class="logo mr-auto">Euc Stories</h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Courses</li>
<li>Trainers</li>
<li>Events</li>
<li>Pricing</li>
<li class="drop-down">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="drop-down">Deep Drop Down
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- .nav-menu -->
Get Started </div>
</header>

Send page name to each url ie index.html?page_name=home
Then call the page name variable from within your page
$page_name = $_GET['page_name'];
You could use a switch statement to set the active link
switch ($page_name){
case 'home':
$active ='active';
break;
case 'about':
$active1 ='active';
break;
case 'courses':
$active2 ='active';
break;
case 'trainers':
$active3 ='active';
break;
default:
// Set a default
}
Then set your links up to activate if the condition from the switch statement is true.
<li><a class="<?= $active; ?> nav-btn" href="#">Home</a></li>
<li><a class="<?= $active1; ?> nav-btn" href="#">about</a></li>
<li><a class="<?= $active2; ?> nav-btn" href="#">courses</a></li>
<li><a class="<?= $active3; ?> nav-btn" href="#">Teachers</a></li>
You will need to set a default. Maybe an if statement. if(!isset($page_name)){ $page_name="home"; }

I tried below one after each list.
Please suggest if any different more feasible approach.
header.jsp:
<%
String uri = request.getRequestURI();
String page_name = uri.substring(uri.lastIndexOf("/")+1);
System.out.println("Page Name: "+page_name);
%>
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<h1 class="logo mr-auto">Euc Stories</h1>
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <img src="assets/img/logo.png" alt="" class="img-fluid">-->
<nav class="nav-menu d-none d-lg-block">
<ul>
<li <% if("index.jsp".equals(page_name) || page_name.length()==0) out.print("class=\"active\""); %>>Home</li>
<li <% if("about.jsp".equals(page_name)) out.print("class=\"active\""); %>>About</li>
<li <% if("courses.jsp".equals(page_name)) out.print("class=\"active\""); %>>Courses</li>
<li <% if("trainers.jsp".equals(page_name)) out.print("class=\"active\""); %>>Trainers</li>
<li <% if("events.jsp".equals(page_name)) out.print("class=\"active\""); %>>Events</li>
<li <% if("pricing.jsp".equals(page_name)) out.print("class=\"active\""); %>>Pricing</li>
<li class="drop-down">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="drop-down">Deep Drop Down
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 2</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
</ul>
</li>
<li <% if("contact.jsp".equals(page_name)) out.print("class=\"active\""); %>>Contact</li>
</ul>
</nav>
<!-- .nav-menu -->
Get Started </div>
</header>

List group in 2 column bootstrap 4

How can I do list-group in 2 columns in bootstrap 4
<div class="categories">
<h4>Categories</h4>
<ul class="list-group">
<li class="list-group-item active">Name 1</li>
<li class="list-group-item">Name 2</li>
<li class="list-group-item">Name 3</li>
<li class="list-group-item">Name 4</li>
<li class="list-group-item">Name 5</li>
<li class="list-group-item">Name 6</li>
</ul>
</div>
so that it was

Try this out
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h4>Categories</h4>
<div class="row">
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Name 1</li>
<li class="list-group-item">Name 2</li>
<li class="list-group-item">Name 3</li>
<li class="list-group-item">Name 4</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Name 1</li>
<li class="list-group-item">Name 2</li>
<li class="list-group-item">Name 3</li>
<li class="list-group-item">Name 4</li>
<li class="list-group-item">Name 5</li>
<li class="list-group-item">Name 6</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Bootstrap Nested Dropdown on Rails

I am trying to create a cascading view in dropdown menu ->
/myApp/app/views/layouts/includes/_site-header.html.erb
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Level 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Level 1.0.1", "/some_link/link_level_1_0_1" %></li>
<li class="dropup"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Level1.1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Level 1.1", "/some_link/link_level_1_1_1" %></li>
</ul>
</li>
</ul>
</li>
Level 1 (top most level) shows up correct, but Level 1.1 nested dropdown, not shows.
How can I use inline CSS to correct this?

You want to make it Nested Dropdown. Here is really good example.
JSFIDDLE
Source from http://jsfiddle.net/chirayu45/yxkut/16/
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
</div>
JS:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});

Bootstrap Pills in Pills in Pills

Here's a link to the JSFiddle i'm currently working on. http://jsfiddle.net/PhoenixOfBlades/3bry9Lo8/6/
I feel like i've scoured the web for answers. I've found lots of questions from people who were confused about nesting Pills/Tabs but never with this many. I'm about this close to solving my issue but this last bit has me completely stumped.
I'm trying to create Pills inside of Pills inside of Pills inside of Pills for greater data organization in an interface. Currently I've got my Age Pills inside of my Canon Pills behaving exactly the way that I want them. And now I want to put my World Pills inside of my Age Pills but for some reason they act the same as my Age Pills and seem to be inside of my Canon Pills. I've tried learning more about Bootstrap as I suspect it may be a syntax issue of some kind but I haven't been able to find anything about Bootstrap's pills except for some code snippets. Here is the code from the fiddle that i'm working with exception of some irrelevant code I commented out at the bottom of the fiddle. The comment notes inside direct you to the section of the code dealing with the World Pills.
If someone could tell me how to put the World Pills inside of the Age Pills instead of the Canon Pills or explain to me why they are behaving this way I'd be very grateful.
<ul class="nav nav-pills nav-justified">
<li class="active">Canon 0</li>
<li class="">Canon 1</li>
<li class="">Canon 2</li>
<li class="">Canon 3</li>
<li class="">Canon 4</li>
<li class="">New Canon</li>
</ul>
<div class="tab-content">
<div id="Canon0" class="tab-pane active">
<h3>Section A</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
<!--down--->
<div class="tab-content">
<div id="#Canon0Age0" class="tab-pane active">
<h3>Section 1</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">World 0</li>
<li class="">World 1</li>
<li class="">World 2</li>
<li class="">World 3</li>
<li class="">World 4</li>
<li class="">World 5</li>
</ul>
</div>
</div>
<!---up--->
</div>
<div id="Canon1" class="tab-pane">
<h3>Section B</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
<!----down---->
<div id="#Canon0Age1" class="tab-pane">
<h3>Section 2</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">World 0</li>
<li class="">World 1</li>
<li class="">World 2</li>
<li class="">World 3</li>
<li class="">World 4</li>
<li class="">World 5</li>
</ul>
</div>
<!-----up----->
</div>
<div id="Canon2" class="tab-pane">
<h3>Section C</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
<div id="Canon3" class="tab-pane">
<h3>Section D</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
<div id="Canon4" class="tab-pane">
<h3>Section E</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
<div id="Canon5" class="tab-pane">
<h3>Section F</h3>
<ul class="nav nav-pills nav-justified">
<li class="active">Age 0</li>
<li class="">Age 1</li>
<li class="">Age 2</li>
<li class="">Age 3</li>
<li class="">Age 4</li>
<li class="">Age 5</li>
</ul>
</div>
...On a side note this fiddle works currently but if I open a new fiddle and paste the code into it then it only appears as an unordered list. Why is that? Is it a matter of settings?
Thankyou ioneyed for answering the bonus question ^_^ I'm no longer ignorant of the External Resources tab in which I had bootstrap.min.css and bootstrap.min.js

I am not sure if this completely answers your questions. Let me know and I can revise it...
But I assume you want to nest objects. Pills cannot be nested like that in bootstrap. However you could nest pills inside of a drop down.
Please see attached jsfiddle: http://jsfiddle.net/u6Lczfz6/
Code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Age 0
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">World 0</li>
<li>World 1</li>
<li>World 2</li>
<li>etc...</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Age 1
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">World 0</li>
<li>World 1</li>
<li>World 2</li>
<li>etc...</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
etc..
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">World 0</li>
<li>World 1</li>
<li>World 2</li>
<li>etc...</li>
</ul>
</div>
</div>
</div>
</div>