Tips for automatically collapsing the Bootstrap 4 Sidebar on smaller devices

I am currently working on some code and have successfully hidden the sidebar using a collapse button. However, I am looking to make it collapse only for small devices, similar to how the bootstrap navbar functions.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 px-1 bg-light" id="sidebar">
      <div class="py-2 sticky-top flex-grow-1">
        <div class="nav flex-sm-column">
          <h2 class="text-center">PROFILE</h2>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".collapse" aria-expanded="true" aria-controls="collapse">Toggle both elements</button>
          <div class="collapse navbar-collapse">
            <a href="" class="nav-link">LINK</a>
          <a href="" class="nav-link">LINK</a>
          <a href="" class="nav-link">LINK</a>
          </div>
          
        </div>
      </div>
    </div>
    <div class="col-sm-9" id="main">
        
          ***PAGE DATA
        
      
    </div>
  </div>
</div>
</div>

htmlcssbootstrap-4responsivesidebar

Answer №2

To achieve this, you can implement a media query:

@media (max-width: 568px) {
  #sidebar {
    display: none;
  }
}

Answer №3

In my opinion, utilizing this solution could assist in resolving your issue. For more information, you can explore the content available on W3SCHOOLS

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .nav {
        width:100%;
    }
    .nav-link {
        width:100%;
        float:none;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue with the Z-index being ineffective is causing the button to appear behind a container in the HTML-CSS

I am currently using Metro CSS (Windows 8 style) and running into an issue. Within my container, there are alerts displayed in blue, and above that is 'IT-CENTER'. When I click on 'IT-CENTER', a button should appear, but it seems to be ...

javascripthtmlcssmicrosoft-metrometro-ui-css

Capturing and saving detailed hand-drawn artwork in high resolution

Is there a cutting-edge solution available for capturing hand-drawn sketches (from a tablet, touch screen, or iPad-like device) on a website using JavaScript and saving it on the server side? Essentially, I am looking for a mouse drawing canvas with a hig ...

javascriptjqueryhtmltablet-pc

Python code for clicking a button using Selenium

I'm having trouble closing popup windows in Selenium with Python. The button labeled "joyride-close-tip" is functioning correctly and closes the window, but the other two buttons are not working. What could be causing this issue? Even though I copied ...

pythonhtmlselenium-webdriverweb-scrapingpopup

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

I am new to jQuery and JavaScript. I have a textbox and a select box, and when I enter a value in the textbox and select a value from the select box, I want to display the multiplication of both values in another textbox. I have tried doing this with two t ...

javascriptjqueryhtml

Trimming Text with JQuery

My goal was to truncate a string and add an ellipsis at the end using jQuery, but my code doesn't seem to be working as intended. Below is the jQuery code I wrote: $(".link-content > h4").each(function(){ var len = $(this).text().length; ...

jqueryhtmlcss

Guide to positioning elements in CSS

I'm struggling to get all the elements to align in a single row. I've tried using display: inline-block, but it's not working as expected. I'm working with DataTables and I want the button images to be aligned with the page number box. ...

htmlcssdatatables

Creating a well-structured HTML layout following the BEM Methodology

I'm unsure about this HTML structure. Does it follow the BEM approach correctly? <div class="boxWithBorder"> <div class="header"> <h2 class="boxWithBorder__element"></h2> </div> </div> In my opinion, it sh ...

htmlbem

Show different JSON data based on the existence of another key in Javascript

Having recently started learning JavaScript, I attempted the code below but couldn't quite get it to work. Despite consulting various resources, I still wasn't successful. Desired Output: To check if AUTO damage is present in the data. If so, re ...

javascripthtmlangularjsjson

Dimensions of CSS Buttons

On my screen, I have 3 buttons with varying sizes determined by their padding. As the text wraps within each button, they adjust in height accordingly. However, the issue arises when the buttons end up being different heights. Instead of setting a specific ...

htmlcss

How can Angular be used for live search to provide precise search results even when the server does not return data in the expected sequence?

Currently, I am in the process of constructing a website for one of my clients. The search page on the site is designed to update search results as you type in the search bar - with each keystroke triggering a new search request. However, there's an i ...

javascriptangularjsajaxhtmlasp.net-ajax

What is the best way to use JavaScript to conceal a section of a form div?

After receiving some code from a certain platform and implementing it to hide part of my form div element, I noticed that the element hides and unhides quickly when running in a browser. This rapid hiding and showing behavior occurs when clicking on the bu ...

javascriptjqueryhtmlcss

Tips for implementing a checkbox (with tick/untick functionality) as a replacement for a plus/minus toggle using HTML

Is it possible to use checkboxes instead of plus and minus signs for expanding and collapsing sections? Can the plus and minus symbols be incorporated into the checkbox itself, so that clicking on the checkbox toggles between plus and minus states? Any hel ...

javascripthtmlcssreactjsbootstrap-4

Adjust the background color of the date and time selection tool

Trying to customize the background of a datetime picker created using jquery.pttimeselect.js. Despite linking the correct css file (jquery.pttimeselect.css), I am unable to change the background color. Any suggestions on how to successfully modify the ba ...

jquerycssdatetimepicker

Is there a way to retrieve the immediate children of all elements using CSS selectors in Selenium?

Although I attempted to utilize the ">" syntax, selenium does not seem to accept it. I am aware that Xpath can be used to obtain what I need, however our project exclusively utilizes CSS selectors. My goal is to create a list containing only the immedi ...

javascriptcssseleniumwebdriverselenium-webdriver

Changing a button to text with PHP upon clicking

I am looking to create a button that, upon being clicked, will show a simple "X" on the website in the same location as the button itself. Essentially, the button will vanish and be replaced by an "X". The current code for my button is straightforward: &l ...

phphtmlbuttononclick

Error: Unbalanced parentheses detected in the argument list at file path C:UsersgajjaOneDriveDesktopuser_loginviewsupdate.ejs during ejs compilation

When I try to update, instead of showing the form fill field, an error pops up. Can someone assist me with this? <!DOCTYPE html> <html> <head> <title>Form Data</title> </head> <body> <h1>Form Dat ...

htmlnode.jsexpressejs

Ways to eliminate extra spacing when search bar is expanded

My code is all contained within a header with the class 'example'. When the 'search' button is clicked, a div with the class 'search-bar' appears and its borders match those of the header. However, I want the search bar to ali ...

css

Phonegap (cordova 1.6.0) integration with Facebook login is experiencing issues on Android

When using Cordova 1.6.0, I am encountering issues with alerts. The Cordova Facebook Connect plugin is failing on login! The Cordova Facebook Connect plugin is also failing on auth.status! Please assist me with resolving these problems. I have been fol ...

jqueryandroidhtmlcordova

Do not request for this element within the array

I have a function that applies to all elements in an array, except for the currently clicked one. For example: cubesmixed = [array, with, 145, elements] cubesmixed[54].click(function() { for(var i = 0; i < 145; i++) { var randomnumber=Math.flo ...

javascriptjqueryhtmlarrays

Alter the hue of a component upon being clicked

Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is ...

javascriptjqueryhtmlcss