I want to remove background color ul list but not getting removed.
This is my code
<div style="margin-left: 15px; margin-top: 20px;" class="col-md-8 card card-body bg-light">
<div class="row">
<div class="col-md-8">
<div id="mydiv2">
</div>
</div>
<div class="col-md-4">
<div style="border: none;margin-left: 10px; margin-top: 25px;">
<ul style="background-color: transparent;" class="list-group .list-group-flush borderless">
<li style="border: transparent; height: 47px;" class="list-group-item d-flex justify-content-between align-items-center">
Item 1
<span class="badge badge-primary badge-pill">14</span>
</li>
<li style="border: none; height: 47px;" class="list-group-item borderless ">Item 2</li>
<li style="border: none; height: 47px;" class="list-group-item borderless">Item 3</li>
</ul>
</div>
</div>
</div>
<style>
.ul {
background-color:transparent;
}
</style>
This is my output
ul is the tag name not class.
you can either
select them with their class names: .list-group{}
or just ul{}.
also remove the "." from in html class names class=".list-group-flush".
If its still not applying try making the css selector more specific so it can override bootstrap. or add !important (not recomended)
<style>
ul.list-group{
background-color: transparent;
}
</style>
Related
Imagen de un diseno en UPlabs
Hi im trying to make a navbar like this but i cant finish it.
someone can help me? Only want to know how round the border of links when they are active
Now i have this resolved, but i dont know how round borders on the container of the links like we see in the design of UpLabs
Image of my project
HTML
<div id="navbar" class="sticky-top">
<div class="d-flex flex-wrap justify-content-center align-content-center" style="height: 20%;">
<img class="{{url}}" alt="">
</div>
<nav class="nav flex-column ml-4">
<a id="link" routerLink="sales" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-cash-register"></i>
</div>
<div class="col-9">
Ventas
</div>
</div>
</a>
<a id="link" routerLink="debtors" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-user-friends"></i>
</div>
<div class="col-9">
Deudores
</div>
</div>
</a>
<a id="link" routerLink="balance" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-chart-line"></i>
</div>
<div class="col-9">
Balance
</div>
</div>
</a>
<a id="link" routerLink="products" routerLinkActive="active" class="nav-link font-weight-bold">
<div class="row">
<div class="col-3 p-0 text-right">
<i class="fas fa-boxes"></i>
</div>
<div class="col-9">
Productos
</div>
</div>
</a>
</nav>
</div>
and this is the file CSS that round borders of links when they are active and other parts of desing.
div#navbar {
left: 0px;
width: 100%;
height: 100vh;
border-radius: 0 40px 40px 0;
background: #f4755f;
}
a#link {
font-size: 18px;
padding: 20px 0;
color: white;
}
.active {
background: #fbf3f2;
color: #f4755f !important;
border-radius: 30px 0 0 30px;
}
img {
width: 45%;
height: 70%;
}
Making the border of a link round is done like that:
html:
Link 1
css
a {
background: red;
border-radius: 10px 0px 0 10px;
}
To make it round only when it is active you need to add a class to the active link and style that instead of the a tag, though.
I have a simple side nav that I built out that I want fixed. From my understanding of bootstrap classes columns are supposed to be aligned. My second column for most of my page content ends up falling behind my sidenav. How do you have a second column aligned with your first while keeping that first column fixed?
#logo {
height: 40vh;
width: 20vw; }
.dropdown-toggle, .dropdown-menu {
width: 300px; }
.btn-group img {
margin-right: 10px; }
.dropdown-toggle {
padding-right: 50px; }
.dropdown-toggle .glyphicon {
margin-left: 20px;
margin-right: -40px; }
.dropdown-menu > li > a:hover {
background: white; }
/* $search-blue */
.dropdown-header {
background: #ccc;
font-size: 14px;
font-weight: 700;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 5px; }
#sidebar {
min-width: 250px;
max-width: 250px;
height: 100vh;
border: 1px solid pink; }
/*# sourceMappingURL=notification.css.map */
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="background-color: #e0f7fa">
<div class="d-flex flex-row" style="border:1px solid black;">
<div class="col d-flex justify-content-start" style="border:1px solid blue;">
<img id="logo" src="./images/logo.png">
</div><!--logo -->
<div class="col d-flex align-items-center justify-content-end" style="border:1px solid red;">
<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/" style="border-radius: 50%;">
0123 4567 8912 3456
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Member name (you)</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
<li class="dropdown-header">Member name</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">0123 4567 8912 3456
</li>
</ul>
</div>
</div><!--dropdown for profile image,name and description -->
</div>
</div><!--container for header -->
<div class="container-fluid" style="border: 1px solid black">
<div class="row">
<div class="col-4 position-fixed align-self-start">
<nav id="sidebar">
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Notification</h3>
</div>
<!-- Sidebar Links -->
<ul class="list-unstyled components">
<li class="active">Edit Profile</li>
<li>Privacy & Security</li>
<li>Payment Setting</li>
<li>Transaction History</li>
<li>Trust & Verfication</li>
<li>My Education Blog</li>
<li>Promotions</li>
</ul>
<ul>Cancel Account</ul>
</nav>
</div>
<div class="col-8 align-self-center">
<h3>Send notifications via</h3>
</div><!--this should be directly next to navbar -->
</div>
</div><!--container for navbar and page content -->
You can see that I have a header in the top page with an image and a dropdown in its own container. Then following that I have a container with the sidenav and where it says "get notifications via" is misplaced. I added borders so you can see the where everything is located.
I've spent much time, but can't get it work.
As you can see on fiddle, I have three main blocks (light gray), and multiple number of blocks inside. I need those little dark blocks to be equal width relatively to the width of the screen or to .thisBlock block (the same).
All divs are on their places. The markup is rather difficult, so I've leaved the most important blocks.
https://jsfiddle.net/nv5aznym/4/
<div class="row">
<div class="col-12">
<div class="row no-gutters">
<div class="col c">
<div class="block">
<ul class="ul d-flex justify-content-between">
<li class="d-inline-block">1</li>
<li class="d-inline-block">2</li>
</ul>
</div>
</div>
<div class="col c">
<div class="block">
<ul class="ul d-flex justify-content-between">
<li class="d-inline-block">11</li>
<li class="d-inline-block">22</li>
<li class="d-inline-block">33</li>
</ul>
</div>
</div>
<div class="col c">
<div class="block">
<ul class="ul d-flex justify-content-between">
<li class="d-inline-block">11</li>
<li class="d-inline-block">22</li>
<li class="d-inline-block">33</li>
<li class="d-inline-block">44</li>
</ul>
</div>
</div>
</div>
</div>
And CSS:
.c {
background-color: green;
margin: 0 2px;
color: white;
width: 100%;
}
.ul {
padding: 0;
margin: 0;
background-color: #dfe0e2;
padding: 5px;
}
.ul li {
background-color: #5d5d5d;
color: #919191;
cursor: default;
width: 100%;
margin: 0 2px;
}
use this jQuery code:
var totalLi = $('.thisBlock li').length;
$('.thisBlock .c').each(function(index, element){
var cLi = $(element).find('li').length;
$(element).css({'flex-basis':cLi/totalLi *100 +'%'})
})
https://jsfiddle.net/acLx1mod/
Using Bootstrap 4, I'm having difficulty targetting the list items on hover. I'm trying to have a default color of the text to a gray, but on hover, make the text a regular black, and on active, have the text white, bolded, with a background color for the different states of the list items.
Here's what it looks like now:
Here is my HTML:
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h4 class="card-title">
<img src="resources/icons/icon-monster/iconmonstr-gear-11-48.png" alt="" class="mr-2">
Account Settings
</h4>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item active">About You</li>
<li class="list-group-item">Education and background</li>
<li class="list-group-item">Professional Development</li>
<li class="list-group-item">Password</li>
<li class="list-group-item">Email/Notifications</li>
<li class="list-group-item">Reviews</li>
<li class="list-group-item">Privacy Settings</li>
</ul>
</div>
</div>
</div><!--end of col-sm-4-->
Here is my CSS:
/*----------------------------------------*/
/*--------SIDEBAR ACCOUNT SETTINGS---------*/
/*-----------------------------------------*/
.list-group-item.active {
background-color: #328cc1;
border-color: #328cc1;
font-weight: bold;
color: #fff;
}
.list-group-item {
color: gray;
}
.list-group-item: hover {
color: black;
}
Everything works great except the list item isn't capturing the change on hover. I've tried targetting it by ul li .list-group-item: hover and that doesn't work either.
There's a space between : and hover. That was the problem with it.
.list-group-item.active {
background-color: #328cc1;
border-color: #328cc1;
font-weight: bold;
color: #fff;
}
.list-group-item {
color: gray;
}
.list-group-item:hover {
color: black;
}
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-header">
<h4 class="card-title">
<img src="resources/icons/icon-monster/iconmonstr-gear-11-48.png" alt="" class="mr-2"> Account Settings
</h4>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item active">About You</li>
<li class="list-group-item">Education and background</li>
<li class="list-group-item">Professional Development</li>
<li class="list-group-item">Password</li>
<li class="list-group-item">Email/Notifications</li>
<li class="list-group-item">Reviews</li>
<li class="list-group-item">Privacy Settings</li>
</ul>
</div>
</div>
</div>
<!--end of col-sm-4-->
I don't know how to put 2 list group next to each other using Bootstrap.
Here's the code what I have now.
<div class="container">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
<h2><a class="url" href="#"><strong>Autó adatai:</strong></a></h2>
<ul class="list-group ticketView">
<li class="list-group-item ticketView">
<span class="label label-default">Gyártmány</span>
<label> Oatmeal</label>
</li>
<li class="list-group-item ticketView">
<span class="label label-default">Modell</span>
<label> Cotton</label>
</li>
<li class="list-group-item ticketView">
<span class="label label-default">Gyártási év/hónap (tól):</span>
<label> Mens's 5-10, 8-12</label>
</li>
</ul>
Not sure if this is what you're asking, but this is what I've worked up:
<div class="row">
<div class="col-sm-6 left">
<ul class="list-group">
<li class="list-group-item"></li>
</ul>
</div>
<div class="col-sm-6 right">
<ul class="list-group">
<li class="list-group-item"></li>
</ul>
</div>
</div>
And the following CSS:
.left, .right {
padding: 0;
}
.left .list-group-item {
border-right: none;
}
.left .list-group-item:first-child {
border-top-right-radius: 0;
}
.left .list-group-item:last-child {
border-bottom-right-radius: 0;
}
.right .list-group-item:first-child {
border-top-left-radius: 0;
}
.right .list-group-item:last-child {
border-bottom-left-radius: 0;
}
Here is a bootply: link