CSS radial-gradient curve causes glitched one pixel box area - html

The expected result from the prototype:
My work (so far):
The problem:
1: There is a 1-pixel glitch border in the curvy area. It appears or disappears depending on website size, for example when the developer console is shown/hidden, changed its size, changed window size, or zoom in/out. How can I fix that?
2: The curve exists but it doesn't resemble the one from the prototype. How can I change the code to make the curve look more similar to the one from the prototype?
The code of the footer:
<nav class="navbar navbar-expand-lg">
<div class="container-fluid" style="background-image: linear-gradient(135deg, #3ab3da , #6858a2);">
<div class="row w-100">
<div class="col-md-4 p-0">
<div class="container h-50 d-flex align-items-center" style="background: white;">
<div class="row w-100">
<div class="col-lg-4 p-0">
</div>
<div class="col-lg-8 col-12 p-0">
<img class="img-fluid pb-3" src="<?php echo wp_get_attachment_image_src(25, "thumbnail")[0]; ?>" style="" />
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: white">
<div class="col"></div>
</div>
<div class="row h-25" style="background: radial-gradient(farthest-side at top left,white 100.00%, transparent 100.00%) bottom right;">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: radial-gradient(farthest-side at bottom right,transparent 100.00%,white 100.00%) top left;">
<div class="col"></div>
</div>
<div class="row h-25">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-6">
<div class="row mt-3">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent_b" aria-controls="navbarSupportedContent_b" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase fw-bold my-5" id="navbarSupportedContent_b" style="font-size: 24px;">
<?php
wp_nav_menu([
"menu" => "Main menu",
"container" => "",
"theme_location" => "primary",
"items_wrap" => '<ul class="navbar-nav text-sm-center me-auto mb-2 mb-lg-0">%3$s</ul>'
]);
?>
</div>
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col-md-4">
<i class="fa-solid fa-location-dot mx-4"></i>xxx
</div>
<div class="col-md-4 border-start border-end">
<i class="fa-solid fa-phone mx-4"></i> (+48) yyy
</div>
<div class="col-md-4">
<i class="fa-regular fa-envelope mx-4"></i> zzz#zz.pl
</div>
</div>
</div>
</div>
</div>
</nav>
Live example:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid" style="background-image: linear-gradient(165deg, #3ab3da , #6858a2);">
<div class="row w-100">
<div class="col-md-4 p-0">
<div class="container h-50 d-flex align-items-center" style="background: white;">
<div class="row w-100">
<div class="col-lg-4 p-0">
</div>
<div class="col-lg-8 col-12 p-0">
foto
</div>
</div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: white">
<div class="col"></div>
</div>
<div class="row h-25" style="background: radial-gradient(farthest-side at top left,white 100.00%, transparent 100.00%) bottom right;">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-1">
<div class="row h-25" style="background: radial-gradient(farthest-side at bottom right,transparent 100.00%,white 100.00%) top left;">
<div class="col"></div>
</div>
<div class="row h-25">
<div class="col"></div>
</div>
<div class="row h-75">
<div class="col"></div>
</div>
</div>
<div class="col-md-6">
<div class="row mt-3">
<div class="row">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent_b" aria-controls="navbarSupportedContent_b" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase fw-bold my-5" id="navbarSupportedContent_b" style="font-size: 24px;">
<ul class="navbar-nav text-sm-center me-auto mb-2 mb-lg-0"><li class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-15 mx-4">Strona główna</li>
<li class="nav-item menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-17 mx-4">Sklep</li>
<li class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-20 mx-4">O nas</li>
<li class="nav-item menu-item menu-item-type-post_type menu-item-object-page menu-item-23 mx-4">Kontakt</li>
</ul> </div>
</div>
</div>
<div class="row mt-1 mb-5">
<div class="col-md-4">
<i class="fa-solid fa-location-dot mx-4"></i>adres
</div>
<div class="col-md-4 border-start border-end">
<i class="fa-solid fa-phone mx-4"></i> telefon
</div>
<div class="col-md-4">
<i class="fa-regular fa-envelope mx-4"></i> kontakt
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>

Related

Bootstrap 5 Tabs is not opening correctly

I want to make Vertical bootstrap tabs but when I tried to use the code from bootstrap 5 docs I faced a problem when opening the tabs as you can see in the screenshot the tabs are showing next to each other when I switch between them so what I'm missing in this
]
code
<div class="d-flex align-items-start center rounded" style="direction: rtl;">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="btn btn-lg btn-primary" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="btn btn-lg btn-primary dflex" id="v-pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile"
aria-selected="false">Store</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="container contain bg-light rounded">
<div class="row" style="direction:rtl;">
<h4 class="title" >Home</h4><br>
</div><hr />
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">إجمالي الأرباح :</span>
<span class="spanValue" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-credit-card iconstate"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">المصروفات :</span>
<span class="spanValuespent" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-dollar-sign spenticon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

A button which contain a description will be hidden inside mobile view

I am working on an asp.net core MVC >> inside y view i am showing a FAQ section. as follow:-
<div class="container">
<div class="row ">
<div class="col-xl-2 mx-auto d-none d-sm-block">
<div class="service_details_left">
<div class="nav nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
</div>
</div>
</div>
<div class="accordion_area col-xl-8">
<div class="faq_ask">
<h3 class="large-heading-3">Frequently Asked Questions</h3>
<div id="accordion">
#foreach (var item2 in Model.OrderBy(a => a.Order))
{
<div class="card">
<div class="card-header" id="#item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed " data-toggle="collapse"
data-target="##item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
<span class="expandable-heading"> #Html.DisplayFor(modelItem => item2.Description)</span>
</button>
</h5>
</div>
<div id="#item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
</div>
</div>
</div>
<div class="col-xl-2">
</div>
</div>
</div>
but on wide screen the FAQ will be shown correctly, as follow:-
while on mobile view the question's description will be hidden as follow!!
any advice on this please?

You can try this snippet.
<div class="container">
<div class="row ">
<div class="col-xl-2 mx-auto d-none d-sm-block">
<div class="service_details_left">
<div class="nav nav-pills" id="v-pills-tab" role="tablist"
aria-orientation="vertical">
</div>
</div>
</div>
<div class="accordion_area col-xl-8">
<div class="faq_ask">
<h3 class="large-heading-3">Frequently Asked Questions</h3>
<div id="accordion">
<div class="accordion" id="accordion">
#foreach (var item2 in Model.OrderBy(a => a.Order))
{
<!-- here -->
<div class="card">
<div class="card-header" id="headingTwoa_#item2.Id">
<h5 class="mb-0">
<button class="btn btn-link collapsed " data-toggle="collapse"
data-target="#collapse_#item2.Id" aria-expanded="true"
aria-controls="#item2.Id">
<span class="expandable-heading"> #Html.DisplayFor(modelItem => item2.Description)</span>
</button>
</h5>
</div>
<div id="collapse_#item2.Id" class="collapse" aria-labelledby="headingTwoa_#item2.Id"
data-parent="#accordion" >
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="col-xl-2">
</div>
</div>
</div>
Note: id needs to start with a letter.

Adjusting the text line height in HTML/CSS

I'm creating a very simple checkout UI with bootstrap. Here's what I have so far:
<ul class="list-group list-group-flush">
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
</ul>
How do I get the "Product Name" rows closer together? There's no top or bottom margins/padding.. so I'm not too sure how to achieve this.
Any help would be much appreciated!

Bootstrap set the body element with line-height: 24px; and the .row element is inheriting it... You should set the line-height of the .row element inside your list group...
.list-group-item .row {
line-height: 10px;
}
li.list-group-item .row {
line-height: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
<li class="list-group-item bg-light px-0">
<h6 class="my-0">Category Name</h6>
<div class="row">
<div class="col text-left"><small class="lh-condensed">Product Name</small></div>
<div class="col text-right"><small class="lh-condensed">$100.00</small></div>
</div>
<div class="row">
<div class="col text-left"><small>Product Name</small></div>
<div class="col text-right"><small>$130.39</small></div>
</div>
</li>
</ul>

Bootstrap: Container is smaller than its columns, they cause an overflow

I have an attached background image on the container, but it only goes with like half the columns and then the columns overflow and the bg image stops.
i tried min-height
the 2 columns are in a container and the columns contain multiple rows
i don't understand why on earth the container is not growing with the columns
HTML:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css"> </head>
<body>
<div class="bg-primary text-center d-flex align-items-center h-50" style="background-image: url("projektberge.png");">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-1 text-white">COVER</h1>
<p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
Button
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-faded text-center">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2SupportedContent" aria-controls="navbar2SupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse text-center justify-content-center" id="navbar2SupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="attached" style="background-image: url("FB-1_Christopher Gusenbauer_PanoramaBahnhof.jpg");">
<div class="h-100">
<div class="container-fluid w-100">
<div class="row h-100">
<div class="col-md-8">
<div class="row" style="height:100%">
<div class="col-md-2 h-100 bg-primary" style="height:100%">
<h1 class="">Summary</h1>
</div>
<div class="col-md-10 h-100">
<div class="row ">
<div class="jumbotron jumbotron-fluid w-100">
<div class="container">
<h1 class="display-3">Jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row bg-primary">
<div class="col-md-6 bg-secondary">
<img class="img-fluid d-block py-3" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg"> </div>
<div class="col-md-6 py-3">
<h1 class="">Heading</h1>
<p class="">Paragraph</p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-primary"></div>
</div>
<div class="row">
<div class="col-md-12 bg-primary">
<div class="container">
<header class="page-header">
<h1>Dark Responsive Timeline with Bootstrap</h1>
</header>
<ul class="timeline">
<li>
<div class="tldate">Apr 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Surprising Headline Right Here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3 hours ago</small></p>
</div>
<div class="tl-body">
<p>Lorem Ipsum and such.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Breaking into Spring!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 4/07/2014</small></p>
</div>
<div class="tl-body">
<p>Hope the weather gets a bit nicer...</p>
<p>Y'know, with more sunlight.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Mar 2014</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>New Apple Device Release Date</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/22/2014</small></p>
</div>
<div class="tl-body">
<p>In memory of Steve Jobs.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="tl-heading">
<h4>No icon here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/16/2014</small></p>
</div>
<div class="tl-body">
<p>Here you'll find some beautiful photography for your viewing pleasure, courtesy of
lorempixel.</p>
<p>
<img src="http://lorempixel.com/600/300/nightlife/" alt="lorem pixel"> </p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Some Important Date!</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/03/2014</small></p>
</div>
<div class="tl-body">
<p>Write up a quick summary of the event.</p>
</div>
</div>
</li>
<li>
<div class="timeline-panel noarrow">
<div class="tl-heading">
<h4>Secondary Timeline Box</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 3/01/2014</small></p>
</div>
<div class="tl-body">
<p>This might be a follow-up post with related info. Maybe we include some extra links, tweets, user comments, photos, etc.</p>
</div>
</div>
</li>
<li>
<div class="tldate">Feb 2014</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>The Winter Months</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/23/2014</small></p>
</div>
<div class="tl-body">
<p>Gee time really flies when you're having fun.</p>
</div>
</div>
</li>
<li>
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Yeah we're pretty much done here</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 02/11/2014</small></p>
</div>
<div class="tl-body">
<p>Wasn't this fun though?</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
<div class="row"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://pingendo.com/assets/bootstrap/bootstrap-4.0.0-alpha.6.min.js"></script>
</div>
</body>
</html>

It's a bug in Boostrap 4 alpha 6.
It's fixed in Boostrap 4 beta 1 that it's under development.
I noticed you are using Pingendo, you can use the Bootstrap 4 beta 1 version changing the import at the end of your sass file in
#import 'bootstrap-4.0.0-alpha.6';

It seems you haven't included bootstrap references inside your head tag
Here are the links - Bootstrap Js Link
Bootstrap CSS Link
Add them like this.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn+scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY+PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js" integrity="sha512-vyRAVI0IEm6LI/fVSv/Wq/d0KUfrg3hJq2Qz5FlfER69sf3ZHlOrsLriNm49FxnpUGmhx+TaJKwJ+ByTLKT+Yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

How to fix some divs on top while scrolling using bootstrap?

I am using bootstrap in Angular 2 project and I want to freeze couple of divs(with ids as filters and categories in the code) on top always, while user scrolls down the page.
This is the code that I have in jsfiddle here
Code Snippet:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="/overview">Overview</a></li>
<li routerLinkActive="active"><a routerLink="/insights">Insights</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div id="filters" class="container-fluid" style="margin-top: 60px" >
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
<div id="categories" class="container-fluid" >
<div class="row">
<ul class="nav navbar-nav">
<li><a routerLink="#">Sub Category 1</a></li>
<li><a routerLink="#">Sub Category 2</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: blue; height: 800px;">
Trend Chart
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: green; height: 800px;">
Bar Chart
</div>
</div>
</div>
</div>
I have tried using bootstrap's 'affix', but it is breaking the scroll and the margins of 'filters' and 'categories' divs, as can be seen here
Kindly let me know if I am missing anything else that needs to be added for affix to work.

To achieve your goal you need to use position: fixed and z-index: 1030 CSS with your div
Here's the jsfiddle
Use this CSS in your div
<div id="filters" class="container-fluid"
style="margin-top: 60px; position: fixed; z-index: 1030;">
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>

Use the style attribute "position:fixed" in both the div you want to be fixed.
Also set z-index value above 100. (this is to show the fixed div over all other div while scrolling).
Example:
<div id="filters" class="container-fluid" style="margin-top: 60px;position:fixed;z-index:999;" >
<div class="row">
<div class="col-md-2 col-sm-4">
<button>Filter 1</button>
</div>
<div class="col-md-2 col-sm-4">
<button>Filter 2</button>
</div>
</div>
</div>
<div id="categories" class="container-fluid" style="position:fixed;z-index:999;" >
<div class="row">
<ul class="nav navbar-nav">
<li><a routerLink="#">Sub Category 1</a></li>
<li><a routerLink="#">Sub Category 2</a></li>
</ul>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: blue; height: 800px;">
Trend Chart
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div style="background: green; height: 800px;">
Bar Chart
</div>
</div>
</div>
</div>