I have slider wth product image, there is a button view more. I want that when someone clicks on that button then image of that product should be visible/zoomed to full screen with animation. Just like this:
https://dribbble.com/shots/6347184-Better-Hero -- Example link
My header screenshot:
My code:
<div class="projectSlider"> // slider
<div class="projectSlider--item"> // slider item 1
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="projectSlider--text">
<div class="projectSlider--subTitle">An Inspirational Collection Of</div>
<div class="projectSlider--title"><span>Creative Designs</span></div>
<p class="projectSlider--description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
<a href="#" class="btn secondary projectSlider--view" data-quickview="quickView">View
More</a>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="projectSlider--img">
<img src="img/template.jpg" alt="template"> // slider image
</div>
</div>
</div>
</div>
// slider items, so on....
</div>
I don't know how to do that kind of image zoom effect. Can you please help me with this? I m stuck
You can do this by creating a simple animation which increases the image size, and after, creating a click listener on that image.
Take a look at the following example, which increases the image size by clicking on it.
const image = document.querySelector(".clickable-image");
image.addEventListener("click", () =>{
image.classList.add("image-open");
})
.clickable-image{
width:50vw;
}
.image-open{
animation: scaleUp 2s forwards linear;
}
.clickable-image:hover{
cursor: pointer;
}
#keyframes scaleUp{
from{
width:50vw;
}to{
width:100vw;
}
}
<img class="clickable-image" src="https://i.pinimg.com/originals/ea/e4/a5/eae4a5191fafae3979ea975d206fcd0b.jpg" alt="image">
Related
I'm trying to run a CSS Animation when a div enters the visible screen. However, I'm noticing the animations are playing when the page loads no matter what.
I've googled the problem, I've messed with the code, nothing seems to be giving me the right results.
JavaScript
var animateHTML = function() {
var elems;
var windowHeight;
function init() {
elems = document.querySelectorAll('.animatemeplz');
windowHeight = window.innerHeight;
addEventHandlers();
checkPosition();
}
function addEventHandlers() {
window.addEventListener('scroll', checkPosition);
window.addEventListener('resize', init);
}
function checkPosition() {
for (var i = 0; i < elems.length; i++) {
var positionFromTop = elems[i].getBoundingClientRect().top;
if (positionFromTop - windowHeight <= 0) {
elems[i].className = elems[i].className.replace(
'animatemeplz',
'animated fadeIn'
);
}
}
}
return {
init: init
};
};
animateHTML().init();
HTML
<div class="menu">
<div class="side-olay">
<p class="side-num">01</p>
<p class="side-nums">02</p>
<p class="side-nums">03</p>
<p class="side-nums">04</p>
</div>
</div>
<!-- START OF INITAL SCREEN -->
<div class="head rellax" data-rellax-speed="-10">
<img class="logo" src="img/logo.png">
<div class="ld1"></div>
<div class="ld2"></div>
<div class="ld3"></div>
<h3>SERVER <span style="font-weight: bold;">MOTTO</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br> incididunt ut ero labore et dolore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br> incididunt ut ero labore et dolore.</p>
<div class="line"></div>
Discord Server
<img class="side" src="img/side.png">
</div>
<div class="stats">
<div class="chart animatemeplz">
<div class="chart-olay">
<ul>
<li>100</li>
<li>50</li>
<li>25</li>
<li>0</li>
</ul>
</div>
<img src="img/Group%2012.png">
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
<div class="chart-bar"></div>
</div>
<h1 class="h1 animatemeplz">STATISTICS</h1>
<p class="p1 animatemeplz">Lorem ipsum dolor sit amet,<br>consectetur adipsicing elit, sed do<br>eiusmod.</p>
<h1 class="h2 animatemeplz">FILTER</h1> <a class="filer-btn animatemeplz">Today</a><a class="filer-btn animatemeplz">A Month Ago</a><a class="filer-btn animatemeplz">4 Months Ago</a>
<p class="p2 animatemeplz">Filter our updated statistic log through clicking designated buttons to alter your filtered result.</p>
</div>
<div class="feat">
<div class="featside">
<div class="sidedot"></div>
<div class="sidedot2"></div>
<div class="sidedot3"></div>
</div>
<img class="featbg" src="img/featbg.png">
<h1>Features</h1>
<div class="line"></div>
<H1><span id="typed">Down to Roleplay ping-able role (#DTRP)</span></H1>
<!--<h1>Down to Roleplay ping-able role (#DTRP) </h1>-->
<p style="margin-left: 20vw;">pingable only every 3 hours or something #DM-request ping spam</p>
</div>
Expected Result: Animation plays when div is scrolled into view.
Actual Result: Animation is played when the page is loaded even when div is not visible.
The issue would seem to depend on your CSS. Your JavaScript is replacing the .animatemeplz class with the .animate and .fadeIn classes for elements that enter the viewport, so CSS of the following form should ensure the animation works:
.animatemeplz {
opacity: 0;
}
.animated {
transition: opacity 1s;
}
.fadeIn {
opacity: 1;
}
A cleaner way of doing it might be to give elements that require animations a single .animate class:
<h1 class="h1 animate">STATISTICS</h1>
<p class="p1 animate">Lorem ipsum dolor sit amet... etc</p>
with CSS for .animate and another class, .visible as follows:
.animate {
transition: opacity 1s;
opacity: 0;
}
.animate.visible {
opacity: 1;
}
You could then toggle visibility using the JavaScript classList.add method.
...
if (positionFromTop - windowHeight <= 0) {
elems[i].classList.add('visible');
} else {
elems[i].classList.remove('visible');
}
...
This would fade out the elements when you scroll back up.
You are also calling checkPosition() on every scroll event. This will likely cause lag on some devices, especially if checkPosition() takes a while to compute. There are a number of ways to fix this, including debouncing where you would wait a specified length of time before calling checkPosition() again. Debouncing with a wait time of 100ms could be done by replacing the code where you add a scroll event listener with the following:
window.addEventListener( 'scroll', function() {
if ( !checkPosition.debounce ) {
checkPosition.debounce = setTimeout(function(){
delete checkPosition.debounce;
checkPosition();
}, 100);
}
} );
I looked up many questions on this topic and there are similar answers that should work, but it's not working for me. I admit DOM traversal is not my strong point, so if you have a solution and can give some context it would really help me understand why the other solutions weren't working.
I have a div with a button and on a button click (this button only appears on mobile) it should slide down only the current div content. I can get this to work, but the issue is it opens up ALL the divs content. I cannot however get it to only open the specific card even using solutions such as $(this), $(next), $(prev) or $(find).
The code I am posting below does not open it at all, and I am using this version of the code because it is most similar to answers on Stack Overflow.
$(document).ready(function(){
$('.mobile-icon').on('click', function(){
event.preventDefault();
$(this).next().find('.card-bottom').slideToggle();
console.log('hi there'); //this does print
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
The main issue is how you're using jQuery's .next() and .find(). Since $(this) is the <a> tag, .next(), which selects the next sibling, is the <p> tag. Then calling .find() on the <p> tag would check through all its descendants, for which there are none.
Therefore you need to select the parent of both the 'card-top' and 'card-bottom' divs before you traverse down with .find().
For example:
$(document).ready(function(){
$('.mobile-icon').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.card-bottom').slideToggle();
});
});
The first call to .parent() will be the parent of the <a> tag, which is the 'card-top' div, and the .parent() of that will be the 'card' div. Then calling .find() will work.
http://www.bootply.com/UMwXaOILHv
Missing the closing " on class="card>
Add event to function() so it's function(event)
If you don't need to link anywhere use a div instead of an a tag and you won't need preventDefault.
$('.mobile-icon').on('click', function(event) {
event.preventDefault();
$(this).closest('.card').find('.card-bottom').slideToggle();
// .closest finds the nearest .card ancestor (it goes up)
// .find then finds .card-bottom within the closest .card
});
.mobile-icon {
background-color: black;
width: 100px; height: 40px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<div class="mobile-icon">click me</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
click me
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
fiddle
https://jsfiddle.net/Hastig/m2zaLfnz/
Background:
At the moment I have a static timeline html/css/jQuery. I want to take it a step further so I made a separate admin page that allows a user to enter the informatiom they want and a picture to appear on the timeline on the correct date (which is saved as date in the database)
I do not know how I can get the timeline to generate so that it displays entries from the database rather that the static timeline loader in the html page. So in other words it pulls the heading, the description the date and the image that was uploaded.
My thinking was using a foreach loop to echo the variables inside the tags that are already there. Such as this:
<div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
<img src="$image" alt=""/>
</a>
<h2>'$date'</h2>
<span><?php echo '$about' ?> </span>
<div class="read_more" data-id="12/05/2012">Read more</div>
Sorry this is probably wrong, I'm not sure how to implement it in php.
Load Function:
$(window).load(function() {
// light
$('.tl1').timeline({
openTriggerClass : '.read_more',
startItem : '15/08/2014',
closeText : 'x',
ajaxFailMessage: 'This ajax fail is made on purpose. You can add your own message here, just remember to escape single quotes if you\'re using them.'
});
$('.tl1').on('ajaxLoaded.timeline', function(e){
var height = e.element.height()-60-e.element.find('h2').height();
e.element.find('.timeline_open_content span').css('max-height', height).mCustomScrollbar({
autoHideScrollbar:true,
theme:"light-thin"
});
});
});
Page that loads Timeline:
<div class="timelineLoader">
<img src="images/timeline/loadingAnimation.gif" />
</div>
<!-- BEGIN TIMELINE -->
<div class="timelineFlat tl1">
<div class="item" data-id="04/05/2014" data-description="Lorem ipsum">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/1.jpg" rel="lightbox[timeline]">
<img src="images/videoConferencingnodevices.jpg" width="410" height"275" alt=""/>
</a>
<h2>MAY, 4</h2>
<span>Example</br>
Example
</span>
<div class="read_more" data-id="04/05/2014">Read more</div>
</div>
<div class="item_open" data-id="04/05/2014" data-access="ajax-content-no-image.html">
<div class="item_open_content">
<img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
</div>
</div>
<div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
<img src="images/collabcompliant.jpg" alt=""/>
</a>
<h2>MAY, 12</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc...</span>
<div class="read_more" data-id="12/05/2012">Read more</div>
</div>
<div class="item_open" data-id="12/05/2012" data-access="ajax-content-no-image.html">
<div class="item_open_content">
<img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
</div>
</div>
Can anyone help me with how I can achieve this outcome and get the data to generate from the database?
I'm creating a standard jQuery image slideshow, but I need to add a certain class to a container div, based on which slide is currently showing.
I'm using Flexslider which helpfully gives the current slide a class of 'flex-active-slide'. What I'd like to do is to use that class combined with a unique class to select the active slide (i.e. '.heating-slide.flex-active-slide).
I'd then like to have jQuery apply an additional class to the containing div (.image-slider.full-width), based on which slide is currently showing.
For example:
If the heating slide is showing, I'd like to apply a class of .heating-container to the .image-slider.full-width div.
If the cooling slide is showing, I'd like to apply a class of .cooling-container
And so on
Here's my code:
<div class="image-slider full-width">
<div class="image-slider-container">
<div class="flexslider wide">
<ul class="slides">
<li class="cooling-slide">
<img src="/assets/images/image-slider/slides/cooling-slide.jpg" />
<div class="flex-caption">
<h2 class="">Cooling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="heating-slide">
<img src="/assets/images/image-slider/slides/heating-slide.jpg" />
<div class="flex-caption">
<h2 class="">Heating</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="ventilation-slide">
<img src="/assets/images/image-slider/slides/ventilation-slide.jpg" />
<div class="flex-caption">
<h2 class="">Ventilation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
</ul>
</div>
</div>
</div>
And here's my poor attempt at writing the required code:
<script type="text/javascript" >
$(document).ready(function () {
$(".heating-slide.flex-active-slide") SOMETHING HERE (".image-slider.full-width").addClass("heating-container");
});
</script>
Any help you can offer will be appreciated!
Update
I wasn't taking into account the other class that was on the element, also made it remove the previously added class so you don't end up with all of them on there:
$(function() {
function setContainer() {
var activeSlide = $(".flex-active-slide");
var activeSlideClass = activeSlide.attr('class')
.replace('flex-active-slide', '')
.replace("-slide", "-container")
var slider = activeSlide.closest(".image-slider.full-width");
var latestClass = slider.data("latest-class");
if (latestClass) {
slider.removeClass(latestClass);
}
slider.addClass(activeSlideClass)
.data("latest-class", activeSlideClass);
}
$('.flexslider').flexslider({
animation: "fade",
controlsContainer: ".flex-container",
animationSpeed: 800, //Integer: Set the speed of animations, in milliseconds
slideshowSpeed: 10000, //Integer: Set the speed of the slideshow cycling, in milliseconds
after: function() { setContainer(); }
});
setContainer();
});
You should be able to paste that into your code as is instead of the existing flexslider binding.
Working Fiddle - http://jsfiddle.net/xt4Ym/3/
I was just wondering how, based on screen size, could you use bootstraps accordion, so for example lets say i have a div I want to display regularly on everything but when in mobile view I want it to collapse.
Any suggestions?
Here is an example using Shail's suggested approach, but without duplicating layouts. The intended behavior is to have an element collapse at one of Bootstrap 3's responsive breakpoints (screen-md).
#media (min-width: #screen-md)
{
#filters
{
display: block;
}
}
<button type="button"
data-toggle="collapse"
data-target="#filters"
class="visible-xs visible-sm collapsed">Filter</button>
<div id="filters" class="collapse">...</div>
The markup is such that #filters is collapsed except when the css media query applies and overrides the behavior of the collapse class.
The button to expand #filters only becomes visible once the media query no longer applies.
UPDATE: Before the divs would not close after another one was clicked like how the accordion works. You must add panel-group and panel to the HTML for it to work. HTML has been updated along with CSS
A little late but I hope this is what you were looking for. I was trying to do the same thing and this is the solution I came up with. First I tried to think how the navbar collapses. I made a class called "div-collapse". Which acts like the navbar collapse and makes the div close and hidden depending where you put it in the css.(this example the div collapses on small devices)
The CSS:
#accordion .panel {
border:none;
-webkit-box-shadow:none;
box-shadow:none;
}
.div-collapse {
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.div-collapse {
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
.div-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
The HTML:
<div class="container marketing">
<hr class="featurette-divider">
<h2>Heading for some content that you have</h2>
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="col-md-12 visible-xs">
<p>
<button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
#1 Example One
</button>
</p>
</div>
<div id="collapse1" class="div-collapse collapse col-md-4">
<h3>Header 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
</div>
</div>
<div class="panel">
<div class="col-md-12 visible-xs">
<p>
<button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
#2 Example Two
</button>
</p>
</div>
<div id="collapse2" class="div-collapse collapse col-md-4">
<h3>Header 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
</div>
</div>
<div class="panel">
<div class="col-md-12 visible-xs">
<p>
<button data-parent="#accordion" class="btn btn-primary btn-lg btn-block" type="button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
#3 Example Three!
</button>
</p>
</div>
<div id="collapse3" class="div-collapse collapse col-md-4">
<h3>Header 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos unde nemo sed necessitatibus vitae ipsum, maxime quaerat dolorum doloremque quibusdam vel mollitia inventore sequi, quam deleniti quidem sunt? Similique.</p>
</div>
</div>
</div>
</div>
This will create three buttons for small devices and have the divs hidden until they are clicked. Once the screen is bigger then small devices the buttons will be hidden via bootstraps responsive classes. And then the divs will go back to acting like they normally do. This way you do not have to create two different layouts and content for mobile and desktop.
JS Fiddle Demo:
JS Fiddle Link
There are built in classes in Bootstrap to help you with this. Try using .visible-phone, .visible-tablet, etc. in your divs.
I know this has been marked as answered already, but maybe my answer will help somebody in the future.
What I'm doing in my scenario is to override bootstrap with event.stopPropagation() in desktop screens and make the collapsable box visible with media queries .
A silly example (Jsfiddle example):
Html:
<div class="data-div" data-toggle="collapse" data-target="#collapseData">
<div class="row">
<div class="col-xs-12">
<b>Always visible data</b>
</div>
</div>
<div class="row collapse" id="collapseData">
<div class="col-xs-12">
Mobile hidden data
</div>
</div>
</div>
CSS:
#media (min-width: 480px)
{
#collapseData
{
display: block;
}
}
Javascript:
var MOBILE_WIDTH = 480;
$( document ).ready(function() {
if ($(window).width() >= MOBILE_WIDTH) {
$('.data-div').click(function (event) {
event.stopPropagation();
});
}
})
You can make use of responsive utility classes in bootstrap check this page for more details http://twitter.github.com/bootstrap/scaffolding.html#responsive
Something Like
<div class="visible-phone">accordion</div>
<div class="visible-desktop">all data you want to display</div>
Jsfiddle demo
Media queries are your friend.
In your CSS add something similar to (this is for an iPhone 3-4 + retina):
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
/*your css here*/
}
#media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
/*your css here*/
}
Inside the query you would then add css to collapse the accordion.
The existing answers are a bit out of date. Instead of visible-[devicename], you can use breakpoint-based responsive classes. So, let's say you want to have a box, #someid, shown in full at sm and above, and collapsible with a toggle button at xs only:
Bootstrap 3
Docs link:
You hide things with hidden-* where * is the breakpoint (xs, sm, md, lg)
You show things with visible-*-** where * is the breakpoint and ** is the CSS display value (inline, block, inline-block).
You can set things to be collapsed by default only at certain breakpoints with collapse-*
For example:
<button class="hidden visible-xs-block" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="collapse-xs">Some content here</div>
Bootstrap 4
Docs link:
hidden-*-up hides the element at * and above, for example, hidden-md-up hides the element at the md (medium desktop) and lg (large) breakpoints.
hidden-*-down is the same for * and smaller - hidden-md-down would hide on everything except lg size.
There are no visible-* equivalents, you just be sure not to hide it at those sizes.
For example (note V4 is still in alpha and there seem to be some changes around collapse, so this might change):
<button class="hidden-xs-down" data-toggle="collapse" data-target="#someid">Button label</button>
<div id="someid" class="hidden-sm-up">Some content here</div>
The button only shows at xs size, the collapsible box is only hidden by default above xs size.
In Bootstrap-4 things are much easier:
<div className="container-fluid text-center d-none d-lg-block">
<div className="row">
<div className="mx-auto col-lg-2">
<p className="text-uppercase">products</p>
</div>
</div>
</div>
We will see "PRODUCTS" on the screen only in large screen and it will be centered(text-center) and will take up only 2 columns wide
I had the similar issue with Angular 6 accordion, where the data table inside accordion was not visible. The solution was to wrap the accordion inside a div with fit-content style for width as shown below
<div style="width:fit-content">
<ngb-accordion [activeIds]="activeAccordians">
<ngb-panel id="id" title="SUMMARY">
<ng-template ngbPanelContent>
<table datatable [dtOptions]="dtOptions" class="row-border hover">
.....
</table
</ng-template>
</ngb-panel>
</ngb-accordion>
</div>