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

I am looking to arrange two div elements and one navigation bar into the header, positioning them at the top-left, top-center, and top-right using CSS. How

I'm attempting to arrange three divs within the <header>: div1 (logo) at the top left of the page, nav2 (menu bar) at the top center of the page, and div3 (social networks) at the top right of the page. However, I am unsure of how to achieve thi ...

htmlcss

Gone Without a Trace: Where Did the WP Admin

I am brand new to creating WordPress themes and I have just started working on my very first one. I have managed to get some content up and running, and the home page is functioning properly. However, when I log into WordPress and view the site, I noticed ...

phphtmlwordpress

Using Bootstrap 4: How to maximize the width of a span element placed near a label

I need to adjust the width of a span next to its label in my project. My goal is to show multiple groups {label / data} on the same line. To achieve this, I divided the row into 4 columns and tried to set a specific width for a span. However, no matter wh ...

htmlcssbootstrap-4

Unlocking the Power of NextJS Keyframes

After successfully creating a background with 3 images using keyframes in my initial project built with html and css, I decided to recreate the project using NextJS. However, I encountered an issue where the third image does not display in NextJS. Instead ...

htmlcssreactjsnext.js

Display data when clicking on Tailwind

I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...

javascriptcsstailwind-css

How can one utilize JSON.parse directly within an HTML file in a Typescript/Angular environment, or alternatively, how to access JSON fields

Unable to find the answer I was looking for, I have decided to pose this question. In order to prevent duplicates in a map, I had to stringify the map key. However, I now need to extract and style the key's fields in an HTML file. Is there a solution ...

javascripthtmljsonangulartypescript

:host-selector for Angular Material dialog

I am currently working with a dialog component provided by angular-material and I need to customize the appearance of the popup dialog. I am aware that there is some support for styling through the component generation: let dialogRef = dialog.open(MyDi ...

cssangulardialogangular-materialangular-material2

Troublesome Suckerfish CSS Navigation Menus failing to function properly on IE7

Feeling completely exasperated, I am encountering issues with aligning the drop downs under the parent item in IE7. Despite functioning properly in all other browsers, including IE8, the drop down menu is not lining up correctly in IE7. In IE7, the drop d ...

cssinternet-explorer-7suckerfish

Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines ...

htmlcssreactjsmaterial-ui

Using `href="#"` may not function as expected when it is generated by a PHP AJAX function

I am facing an issue with loading html content into a div after the page has loaded using an ajax call. The setup involves a php function fetching data from the database and echoing it as html code to be placed inside the specified div. Here is my current ...

javascriptphphtmlajax

Reacting to multiple checkboxes in a check handling system

In my latest project, I have designed a component that utilizes multiple checkboxes generated within a .map function. While testing the functionality, it came to my attention that users could select more than one checkbox at a time. This is not ideal as th ...

htmlreactjscheckboxjsx

Checking the length of user input with JavaScript

To ensure that the user enters at least 4 letters in a text box and show an error if they don't, I need help with the following code. It is partially working but currently allows submission even after showing the error message. I want to prevent subm ...

javascripthtml

Include a floating element within a modal box

I am trying to display some cards within a Bootstrap modal form. Inside the modal, I want the cards to appear in two columns by using the "col-md-5" class. .mycard.col-md-5 card contents However, when I use the "col-md-5" class, it adds a property o ...

htmlcsstwitter-bootstrap-3frontend

How can you easily center content vertically on a web page?

There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...

htmlcss

Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

I am having trouble with a ContentEditable div that requires the hiding of characters, specifically the first and last character. I need to overlay a layer on top of the "#" character to make it appear as if the character and the border line beneath it are ...

htmlcsscontenteditable

What are the steps to create a CSS grid like this?

Any suggestions on how to create a grid template similar to the image shown in this picture? I am looking to achieve this design without rounded borders and without any gaps between the elements. ...

htmlcssgridcss-grid

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Emphasize the interactions within the table cells based on their corresponding column and row

I'm looking to achieve a specific interaction in my Angular Material table. I want to highlight the table cell interactions with column and row by extending the highlighting up to the column header and left to the row header. Is this something that ca ...

htmlcssangularangular-material

Displaying PHP errors in input fields

I have noticed that this particular code is functioning correctly. However, I am wondering why I receive an error when I remove the foreach loop ($rows as $row). Is there a method to display the data without utilizing it? <?php require("coneccion.php ...

phphtmlcss

What causes a custom element to suddenly crumble?

I am attempting to create a custom field that can display either an SVG or a Canvas, but the rendering is not as expected. I anticipate two boxes that are 400 pixels wide and 300 pixels high, however, they appear to collapse in an unusual manner. How can I ...

htmlsvgecmascript-6html5-canvas