I've placed 3 images in a row and I need the bottom of the first image to overlap the row beneath it. While in mobile view, I need the first image to overlap the second one. My problem is that even placing the z-index "properly" as I read in so many topics, I still don't get the desired outcome. I've changed the margins, placed the z-index value, gave the proper positioning to the images but still nothing happens.
Image 1 displays how is the current view,plus how it looks on mobile and image 2 how it should look if it works correctly.
Image 1
Image 2
Here is the HTML, I'm using for this specific part of the website:
<div class="container-fluid">
<div class="row ">
<div class = "three-images">
<div class="col-md-4 col-sm-4">
<img src = "image/sox.png" class = "img-responsive" id ="first-image">
<div class="carousel-caption">
<div class ="text-one">
<span><h1>About<br>ShortsTV<br>Oscars<br></h1></span>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 ">
<img src = "image/2.jpg" class = "img-responsive" id ="second-image">
<div class="carousel-caption">
<div class = "text-two">
<div class ="who">WHO ARE WE</div>
<span1><h3>Lorem ipsum dolor sit amet<br>adipiscing elit<br></h3></span1>
<div class = "who">Lorem ipsum dolor sit amet, consectetur<br>adipiscing elit. Nulla quam velit, vulputate eu<br>
pharetna nec, mattis ac neque. Duis vulputate</div>
</div>
<a class="btn btn-primary" href="#" role="button">Watch Trailer</a>
</div>
</div>
<div class="col-md-4 col-sm-4">
<img src ="image/3.jpg" class ="img-responsive" id ="third-image">
<div class="carousel-caption">
<div class = "text-three">
<span><h1>How to get
ShortsHD (US) or
ShortsTV (Europe)
</h1></span>
</div>
</div>
</div>
</div>
</div>
<div class= "row">
<div class ="big-image">
<img src = "image/4.jpg" class= "img-responsive">
</div>
</div>
Here is the CSS I used to edit the images:
#first-image{
height: 500px;
position:absolute;
z-index:30;
margin-bottom: -30px;
}
#second-image{
height: 440px;
filter: brightness(50%);
z-index:10;
}
.big-image{
position:relative;
z-index:20;
}
use this
#first-image{
height: 500px;
position:absolute;
z-index:30 !important;
margin-bottom: -30px;
}
#second-image{
height: 440px;
filter: brightness(50%);
z-index:10 !important;
}
.big-image{
position:relative;
z-index:20 !important;
}
Related
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">
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/
How would I go about hiding and showing multiple divs using JavaScript? I don't want to use JQuery. I can make it work for hiding and showing one div but not multiple divs. The problem originates because I'm using PHP to display multiple records. These records are included in divs which have the same ID.
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );
.edit-slider {
display: none;
}
<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>
HTML;
<div class="panel-body panel-strip" id="history-slider">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>
<img src="img/time_icon.png" class="time-icon"> <span class="hour-text">4.00 hrs</span>
</p>
</div>
<hr class="calendar-divider">
<div class="panel-body panel-strip edit-slider">
<div class="row pull-right">
<a href="add.php">
<div class="col-xs-4 delete-panel">
<img src="img/delete_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Delete</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 edit-panel">
<img src="img/edit_icon.png" class="edit-images center-block"><span class="text-center edit-texts edit-text">Edit</span>
</div>
</a>
<a href="http://google.com/">
<div class="col-xs-4 record-panel">
<img src="img/record_icon.png" class="edit-images center-block"><span class="text-center edit-texts">Record</span>
</div>
</a>
</div>
</div>
JavaScript;
document.getElementById( 'history-slider' ).addEventListener( 'click', function() {
document.getElementById('edit-slider').style.display = 'block';
document.getElementById('history-slider').style.display = 'none';
}, false );
document.getElementById( 'edit-slider' ).addEventListener( 'click', function() {
document.getElementById('history-slider').style.display = 'block';
document..getElementById('edit-slider').style.display = 'none';
}, false );
I have also set in the CSS to hide the "edit-slider" div on page load.
.edit-slider {
display: none;
}
The HTML is echoed out in a loop for every record in the database. Information is also added in replace of the placeholder text.
How should I best go about making it so that if a div if clicked it is hidden and the corresponding div is shown in it's place?
I was thinking about doing something about individually giving the divs separate ID's in PHP and than passing those ID's to JavaScript and creating some sort of a loop? My knowledge of JavaScript isn't massive so I don't really know how easy or difficult this method would be. Or is there a much easier method?
This is my first stack overflow post,so sorry if I'm doing anything wrong or missed something.
If you use classes instead of IDs you can use document.QuerySelectorAll() to get all the divs with that class and then show or hide as necessary.
Something like below would hide all divs with an edit-slider class and reveal (assuming they were already hidden) all divs with a history-slider class.
(function() {
var editSliders = document.querySelectorAll('div.edit-slider');
for(var i=0;i<editSliders.length;i++){
editSliders[i].style.display = 'none';
}
var historySliders = document.querySelectorAll('div.history-slider');
for(var i=0;i<historySliders.length;i++){
historySliders[i].style.display = 'block';
}
})();
First, consider using class instead of id to set multiple elements with the same attribute and value. Then, use the following script:
<script type="text/javascript">
document.querySelectorAll('div.history-slider').forEach(item => {
item.addEventListener("click", myFunction);
});
function myFunction() {
this.hide;
}
</script>
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>