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>
Related
I'm using SharePoint Designer and I would like to apply a custom bullet on the parent li (Desc 1 and Desc 2) of my list, but what's happening is that it is being applied on all the list items including the children li. Can someone help me with it? how it should be done correctly in CSS? Thanks.
.tab-content.content-show ul li {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li {
list-style-image: none !important;
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
To select the direct children and not the grandchildren, you can use ">" as shown below
.tab-content.content-show div > ul > li {
list-style-image: url(/img.png);
}
And no need for 2nd class.
here is the customized css:
.tab-content.content-show div > ul > li {
background: url("https://www.kindpng.com/picc/m/313-3131657_blue-bullets-icon-png-transparent-png.png") left center no-repeat;
background-size:20px;
padding: 0 0 0 40px;
}
You were pretty close. Your CSS should look like this:
.tab-content.content-show div > ul > li {
list-style-image: linear-gradient(to left bottom, red, blue);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
The Child Selector (>) applies the CSS rules to the direct children of the particular element.
See this related answer: https://stackoverflow.com/a/4830672/801544
Note I've used a gradient instead of an image just to show that it works, but you can use any image instead.
you should use "ul:first-child" in css:
.tab-content.content-show ul:first-child > li{
list-style-image: url(https://www.w3schools.com/cssref/sqpurple.gif);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
Do you have access to the HTML code? If yes I would put a class on the li you are interested in.
<li class="custom-bullet">Desc 1</li>
.custom-bullet {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li is going to match li elements that are children of li elements … which is not allowed in HTML.
Just use child combinators instead of descendant combinators in the first place.
.tab-content.content-show > div > ul > li {
list-style-image: url(http://placekitten.com/20/20);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="parent">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="parent">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
You can change your css to following way
.tab-content.content-show > Div > ul > li {
color:red;
}
see the jsFiddle
As well as you can set unique class both and and set colors accessing that class like following
.html
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="Desc1">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="Desc2">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
.css
.tab-content.content-show .Desc1{
color:red;
}
.tab-content.content-show .Desc2{
color:green;
}
see the jsfiddle
The best way to solve this problem is to give parent list items a class attribute and you style that class.
li.parent {
list-style-image: url(/img.png);
}
.tab-content.content-show ul li > li {
list-style-image: none !important;
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class="parent">Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class="parent">Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
.tab-content.content-show ul li.parent {
list-style-image: url(/img.png);
}
<div class="tab-content content-show" data-content-id="1" id="content-1">
<div>
<ul>
<li class='parent'>Desc 1 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
<li class='parent'>Desc 2 </li>
<ul>
<li>details 1</li>
<li>details 2</li>
<li>details 3</li>
<li>details 4</li>
</ul>
</ul><br>
</div>
</div>
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>
I have a type card:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='card'>
<div class='card-header'>
<div class='row'>
<div class='col'>
<h5 class='mb-0'>Element</h5>
</div>
<div class='col'>
<p class='text-right mb-0'>n</p>
</div>
</div>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<ul>
<div class='card-footer'>
<div class='input-group'>
<input type='text' class='form-control' placeholder='New item'>
<div class='input-group-append'>
<button class='btn btn-outline-secondary' type='button'> + </button>
</div>
</div>
</div>
</div>
The more items are added, the more the header where the number of items comes from is moved.
How can I make it stay in position when the items are more?
I tried sticky-top but it's stuck all the way to the top so it has a margin or padding on top.
that would be my approach:
basicaly: set position:relative to parent element (.card) and position:fixed to child element (.card-header)
.card{
position: relative; /* all child elements gets positioned relative to this element */
}
.card-header{
position: fixed; /* stay fixed on top */
top: 0;
width: 100%;
z-index: 1; /* needed to stay above other elements */
}
.list-group{
padding-top: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='card'>
<div class='card-header'>
<div class='row'>
<div class='col'>
<h5 class='mb-0'>Element</h5>
</div>
<div class='col'>
<p class='text-right mb-0'>n</p>
</div>
</div>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 4</li>
<li class='list-group-item'>Item 5</li>
<li class='list-group-item'>Item 6</li>
<li class='list-group-item'>Item 7</li>
<li class='list-group-item'>Item 8</li>
<li class='list-group-item'>Item 9</li>
<ul>
<div class='card-footer'>
<div class='input-group'>
<input type='text' class='form-control' placeholder='New item'>
<div class='input-group-append'>
<button class='btn btn-outline-secondary' type='button'> + </button>
</div>
</div>
</div>
</div>
You need to apply css to your ul for fixed card header when item increase. You can change ul height as suitable as you.
.list-group-flush{height:400px;overflow-y:auto;}
.list-group-flush{height:400px;overflow-y:auto;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='card'>
<div class='card-header'>
<div class='row'>
<div class='col'>
<h5 class='mb-0'>Element</h5>
</div>
<div class='col'>
<p class='text-right mb-0'>n</p>
</div>
</div>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<li class='list-group-item'>Item 1</li>
<li class='list-group-item'>Item 2</li>
<li class='list-group-item'>Item 3</li>
<ul>
<div class='card-footer'>
<div class='input-group'>
<input type='text' class='form-control' placeholder='New item'>
<div class='input-group-append'>
<button class='btn btn-outline-secondary' type='button'> + </button>
</div>
</div>
</div>
</div>
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>
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.