I have a navbar inside the component of Angular project. The navbar that is used is responsive and has a toggle button which appears after you reduce the size of the browser window. The purpose of the button is to display or hide the menus when clicked.
What I need is that when Click anywhere instead of the button, it should close the menus that were displaying.
This is in the component of Angular Project.
<div class="row my-row">
<div class="col my-col-1 ">
<input type="checkbox" id="menu" />
<label for="menu" class="menu">
<span></span>
<span></span>
<span></span>
</label>
<nav class="nav text-white">
<ul>
<li><a routerLink=""><i class="bi bi-house my-fas"></i> <span class="my-span text-white"> Home</span></a></li>
<li><a (click)="onClick('feature')" ><i class="bi bi-play my-fas"></i> <span class="my-span"> Featured Games</span></a></li>
<li><a (click)="onClick('quickPlay')"><i class="bi bi-play my-fas"></i> <span class="my-span"> Most Played Games</span> </a></li>
<ng-template [ngIf]="permission">
<!-- <li ><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></li> -->
<li (click)="onLogout()"><i class="bi bi-power my-fas"></i> <span class="my-span text-white"> Logout</span></li>
<li (click)="onLogout()"><i class="bi bi-person-x my-fas"></i> <span class="my-span text-white"> Unsubscribe</span></li>
</ng-template>
</ul>
</nav>
</div>
<div class="col my-col-2">
<div *ngIf="allow ; else loggedOut">
<span class="user-name">{{userName}}</span>
<img src="../../../assets/Avatar/1.png" alt="Avatar" class="avatar">
<div class="dropdown dropleft">
<span type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="drop-down" > <i style="color: white;" class="ml-4 bi bi-caret-down"></i></span>
<div class="dropdown-menu " style="margin-right: -50px;margin-top:40px;border-radius: 8px;" aria-labelledby="dropdownMenuButton">
<!-- <a class="dropdown-item" href="#"><i class="fas fa-user my-fas"></i> <span class="my-span"> Profile</span></a> -->
<a class="dropdown-item" href="http://gamenow.noeticworld.com/unsub-portal"><i class="bi bi-person-x my-fas"></i> <span class="my-span"> Unsubscribe</span></a>
<a (click)="onLogout()" class="dropdown-item" href="#"><i class="bi bi-power my-fas"></i> <span class="my-span"> Logout</span></a>
</div>
</div>
</div>
<ng-template #loggedOut>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Login
</button>
<button style="outline: none;" (click)="onClick('login')" class="my-button">
Join Now
</button>
</ng-template>
</div>
</div>
You can achieve that functionality by using Host listeners for example within the menu component like this:
#HostListener('document:click')
clickout() {
// toggle the menu by using its reference
}
I have a page with a data grid, and in that grid every row has a bootstrap dropdown button/menu in it with actions you can perform against that data row. The problem is, the menu opens on hover, and I want it to be on click only (so the user doesn't accidentally open the menu on the wrong row).
Is there a way via CSS to tell the menus to not do anything on hover? I'd prefer not to use jquery for it, and as I have other dropdowns on the page outside the grid, I'd also like to target the ones in the grid specifically so I don't bung up the others.
Sample cell in ng-repeat row:
<td class="text-center" ng-if="vm.isCustService">
<div class="dropdown drop-down-in-grid">
<button type="button" id="btnCustDetails_{{$index}}"
class="btn btn-success btn-sm dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-fw fa-ellipsis-v fa-lg"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnCustDetails">
<div>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/details/" id="lnkDetails_{{$index}}"><i class="fa fa-fw fa-user"></i> Customer Details</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/addresses/" id="lnkAddresses_{{$index}}"><i class="fa fa-fw fa-address-book-o"></i> Addresses</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/jobs/" id="lnkJobs_{{$index}}"><i class="fa fa-fw fa-calendar-o"></i> Jobs</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/createJob/" id="lnkAddJob_{{$index}}"><i class="fa fa-fw fa-calendar-plus-o"></i> New Job</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/notes/" id="lnkNotes_{{$index}}"><i class="fa fa-fw fa-file-word-o"></i> Notes</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/statements/" id="lnkStatements_{{$index}}"><i class="fa fa-fw fa-money"></i> Statements</a>
<a class="dropdown-item text-nowrap" href="/CustomerDetails#/orderSummary/" id="lnkOrderSummary_{{$index}}"><i class="fa fa-fw fa-tasks"></i> Order Summary</a>
</div>
</div>
</div>
</td>
Delete this style from your css
.dropdown:hover>.dropdown-menu {
display: block;
}
I'm trying to get the value of an express handlebar {{this.shortName}} which was in an "each" handle bar helper. Im trying to get the this.shortName of the value then transfer it to to the attribute of the modal since its in a table format. I have no idea on how to do it in jquery.
This is my code in HTML:
{{#each college}}
<tr>
<th scope="row"></th>
<td>{{{#index}}{{this.shortName}}</td>
<td>{{#index}} {{this.longName}}</td>
<td>
<div class="dropdown">
<button class="btn btn-primary btn-sm text-white dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" class="text-center" data-toggle="modal" data-target="#modaledit">Update Info</a>
<a class="dropdown-item" class="text-center" data-toggle="modal" data-target="#modaldelete">Delete College</a>
<a class="dropdown-item" class="text-center" href="/colleges/{{this.shortName}}">Go to College</a>
</div>
</div>
</td>
</tr>
{{/each}}
I hope I'll get the answer right. Thank you :)
I'm using Bootstrap material design. Which is https://fezvrasta.github.io/bootstrap-material-design/
here is it's jsfiddle https://jsfiddle.net/Manoj07/4c90wbo3/
In this, I'm unable to make a navbar fixed on the top. I'm using a drawer navigation bar also in this so please help me out how to make navbar fixed top by using bootstrap material design? frezvasta.github.io
<header class="bmd-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
aabbaaaa
<a href="profile.html" style="text-decoration: none; color: black;"><i class="far fa-user-circle pl-1"
style="padding:0;"></i></a>
<a href="cart.html" style="color: inherit!important;"><i class="fas fa-shopping-cart pl-1"><sup><span
class="badge badge-info">0</span></sup></i></a>
</div>
</header>
<div id="dw-s2" class="bmd-layout-drawer bg-faded">
<header style="display: inline-block;">
<i class="fas fa-home"></i>Home
<a class="navbar-brand" href="index.html" style="padding-left: 50%;"><img src="img/logo.png" class="img-fluid"
style="height: 25px;width: 25px;"></a>
</header>
<ul class="list-group">
<li class="list-group-item">
<div class="dropright show">
<a class="dropdown-toggle text-dark" href="#" role="link" id="dropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Women</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Home Furniture</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">TVs and Appliances</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Sports, Books & More</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Mobiles and Gadgets</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Men</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Pets</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Baby</a>
<a class="dropdown-item" style="color: black;" href="fashion_category.html">Cars & Bikes</a>
</div>
</div>
</li>
<li class="list-group-item">My Cart</li>
<a href="my_order.html" style="text-decoration: none; color: black;">
<li class="list-group-item">
My order
</li>
</a>
<a href="profile.html" style="text-decoration: none; color: black;">
<li class="list-group-item">My account</li>
</a>
<li class="list-group-item">Notifications</li>
<li class="list-group-item">Help center</li>
</ul>
</div>
<main class="bmd-layout-content">
<div class="search-container">
<input type="text" placeholder="Search aabbaaaa for products" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
You mark up was all incorrect, Had fixed the markup and copule of css is updated.
You can add sticky-top class to make an element sticky to the top.
Please check the updated jsfiddle Here
Since the html is too long, I am not updating it here completely, justing posting the header part.
<header class="bmd-layout-header sticky-top">
<div class="navbar bg-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
aabbaaaa
<a href="profile.html" style="text-decoration: none; color: black;"><i class="far fa-user-circle pl-1"
style="padding:0;"></i></a>
<a href="cart.html" style="color: inherit!important;"><i class="fas fa-shopping-cart pl-1"><sup><span
class="badge badge-info">0</span></sup></i></a>
</div>
</header>
put this css code
.bmd-layout-header .navbar{
position: fixed;
right: 0;
left: 0;
}
.bmd-layout-content {
padding-top: 56px;
}
OR
you can put material css .fixed-top class beside .navbar class and put this css so your layout not overlap to fix header
.bmd-layout-content {
padding-top: 56px;
}
have you add class like this in you html?
I'm wanting to change the area marked in red to a grey color, I've tried a bunch of things but I'm stumped, any help would be greatly appreciated!
Essentially I'm wanting to make the background a light grey color but not change the top bar or the navigation.
Image
Here is the code:
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2">
<h1>Title</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
<button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button>
</div>
<ul class="list-group">
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<ul class="list-group">
<li class="list-group-item">24th November 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>
<li class="list-group-item">24th October 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>
<li class="list-group-item">24th September 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>
<li class="list-group-item">24th August 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
</ul>
</div>
</div></div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><h3 class="panel-title">Title</h3></div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Thank you in advance for any help you can provide!
You need to to write or overwrite rules from bootsrap.
Create the selectors for each div you want to target .
example:
main,
main .panel ,
main .panel .panel-heading
/* and whatevere else you want to select */
{
background:grey;
}
What your are looking for is a background-color css property.
You can give him a color. Personaly i like #939393.
So you can try adding :
style="background-color:#93939; to your <main> tag
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-white sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Domestic Bills <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item<span class="glyphicon glyphicon-pencil"></span></a>
</li>
</ul>
</nav>
<main class="col-sm-9 offset-sm-3 col-md-10 offset-md-2" style="background-color:#939393">
<h1>Title</h1>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
<button type="button" class="btn btn-primary-panel-titles" aria-label="Left Align">Edit</button>
</div>
<ul class="list-group">
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Times: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Payment Method: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payments: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
<div class="row"><div class="col-md-4"><li class="list-group-item">Fixed Payment Amount: </div>
<div class="col-md-8"><p class="input-list"><input name="site" disabled="disabled" class="form-control" type="text" value="Value"></p>
</div></div></li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Title</h3>
</div>
<ul class="list-group">
<li class="list-group-item">24th November 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">10:20 AM Thur 30 Nov 2017</p></li>
<li class="list-group-item">24th October 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">11:00 AM Tue 28 Nov 2017</p></li>
<li class="list-group-item">24th September 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">01:19 PM Mon 27 Nov 2017</p></li>
<li class="list-group-item">24th August 17<p class="task-edit">
<span class="glyphicon glyphicon-pencil"></span>
</p><p class="task-delete">
<span class="glyphicon glyphicon-trash"></span>
</p><p class="task-time">03:52 PM Sat 25 Nov 2017</p></li>
</ul>
</div>
</div></div>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading"><h3 class="panel-title">Title</h3></div>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Do you have a div containing them all?... I can see you are good at this, so I hope you tried to find the class name and set the background-color="someShadeOfgrey"... You can do this with the < style> tag or a CSS file :)... or just implement it with the < div> tag
<div class="myClass" style="background-color:grey;">