Having trouble with Bootstrap not hiding on small screens as intended?

I'm not sure if the issue is related to my browser, but I need the first pills-tab to be hidden on small screens and visible on medium to larger screens. The second pills-tab should be visible on small screens and hidden on larger screens.

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <div class="col-2 d-sm-none d-md-block">
    <div class="nav flex-column list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="list-group-item list-group-item-action active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">small no</a>
      <a class="list-group-item list-group-item-action" id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      <a class="list-group-item list-group-item-action" id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      <a class="list-group-item list-group-item-action" id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
    </div>
  </div>
  <div class="col-12 d-sm-block d-md-none">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">All</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
      </li>
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

htmlcssbootstrap-4

Answer №1

When using the utility classes in Bootstrap, they apply a specific style to a given width and higher. For example, by adding d-sm-none, you are essentially setting display:none from the small width and up. To hide an element from the smallest breakpoint upwards, use d-none.

To make the necessary change, switch your 

<div class=”col-2 d-sm-none d-md-block”>
to 
<div class=”col-2 d-none d-md-block”>
.

Additionally, you can eliminate d-sm-block from the second div since display:block is already implied by the col-* classes.

It appears that you intend to display the same menu with varied styles based on screen size. In this case, I suggest having one html block for the menu and adjusting styles according to screen size instead of duplicating content.

Please refer to this fiddle as a reference: https://jsfiddle.net/p8ek5ths/

Answer №2

Include the d-none CSS class in place of 

<div class="col-2 d-sm-none d-md-block">

<div class="col-2 d-none d-md-block">
    <div class="nav flex-column list-group" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="list-group-item list-group-item-action active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">small no</a>
      <a class="list-group-item list-group-item-action" id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      <a class="list-group-item list-group-item-action" id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      <a class="list-group-item list-group-item-action" id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
    </div>
  </div>

  <div class="col-12 d-sm-block d-md-none">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="v-pills-all-tab" data-toggle="pill" href="#v-pills-all" role="tab" aria-controls="v-pills-all" aria-selected="true">All</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-paid-tab" data-toggle="pill" href="#v-pills-paid" role="tab" aria-controls="v-pills-paid" aria-selected="false">Paid</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-free-tab" data-toggle="pill" href="#v-pills-free" role="tab" aria-controls="v-pills-free" aria-selected="false">Free</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " id="v-pills-pending-tab" data-toggle="pill" href="#v-pills-pending" role="tab" aria-controls="v-pills-pending" aria-selected="false">Pending</a>
      </li>
    </ul>
  </div>

https://jsfiddle.net/lalji1051/wp57bsgk/2/

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

Should buttons be wrapped based on the text of the link?

I'm struggling to include buttons in my design but I can't seem to achieve the desired outcome. The image below illustrates what I am attempting to create but have been unsuccessful in replicating: https://i.sstatic.net/CnYLV.png However, the ...

htmlcss

What is the best method to obtain the following id for an image?

Whenever I hover over the li with the number 3, I am getting the wrong number for the next id in the img tag. The first time, I get next id = 4 which is incorrect. But on the second hover, I get next id = 0 which is what I actually need. How can I correctl ...

javascripthtmljquerycsscarousel

Tips for extracting an XML value from an API

I'm attempting to showcase a value retrieved from an API (specifically used by PRTG software to extract information). Here is the link to the API: The API provides an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <ch ...

javascripthtmlajaxxml

Increasing the padding at the top of the logo when scrolling down the page

When scrolling down the page, there seems to be extra padding above the logo that is throwing off the alignment with the rest of the site. I've been trying different solutions to correct this issue: //$('.navbar-brand').css({ 'padding- ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transforming HTML with JavaScript

I am facing a challenge in my JavaScript application where I receive HTML code from an endpoint that contains radio buttons. Unfortunately, I cannot modify the HTML content coming from this endpoint. My goal is to convert these radio buttons into regular b ...

javascriptjqueryhtml

Exploring HTML5 using QXmlQuery

Looking to execute XQueries on a batch of HTML5 documents using QT (currently at 5.8...) HTML/HTML5 documents, unlike XHTML/XHTML5, are not well-formed XML files. HTML introduces elements that XML parsers cannot handle off the bat (such as special characte ...

htmlxmlqtxpathqxmlquery

How can I stop and hover over time in AngularJs Interval?

Within my UI, I have a time element that is continuously updated using AngularJS Interval. Even the milliseconds are constantly running. Is it possible to implement a feature where the time pauses when hovering over it? Any assistance would be greatly appr ...

javascriptjqueryhtmlcssangularjs

calculating the duration between successive PHP form submissions

I am trying to calculate the duration between when a user submits a PHP form and when they submit it again. The form reloads on the same page, essentially refreshing it. Additionally, the user may enter the same data again. I want the timer to start runnin ...

javascriptphppythonhtmljson

Guide to changing the checkbox value using JavaScript

Describing the Parent Element: <span style="background: yellow; padding: 50px;" onClick="setCheckBox()"> <span> </span> <input type="checkbox" name="f01" value="100"> </span> ...

javascripthtmloracle-apex

Chrome's XPath attribute selection is not functioning properly

After running a small test with expect.js, here are the results: describe('xpath', function () { it('locates attribute nodes', function () { $(document.body).append('<string fooBar="bar"><data id="xyz">< ...

javascriptgoogle-chromexpathhtml

Issue with Bootstrap Navbar dropdown causing page refresh instead of menu dropdown activation

<!DOCTYPE html> <html lang="en" dir="ltr" style="style.css"> <!-- All icons were courtesy of FlatIcon : www.flaticon.com and FreePik : www.freepik.com --> <head> <meta charset="utf-8"&g ...

javascripthtmlcssbootstrap-5

What is the best way to align the items in two lists at the center as if they were all individual

Q: How can I center the list-item elements of two unordered lists as if they were children of just one list? Example: {[1][1][1][1][2][2]} { [2][2] } CSS Alignment Challenge <div> <ul> &l ...

htmlcss

Can I use a custom font in an HTML5 canvas?

Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to ...

javascriptcsshtmlfontshtml5-canvas

My fixed navigation bar is being impacted by the link decorations

I'm fairly new to web development, so please be patient with me. I am trying to achieve a design where my image links are displayed at half opacity by default and then switch to full opacity when hovered over. While this is working as intended, it see ...

htmlcsscontainersopacitynav

JavaScript code to dynamically change the minimum value of an input field when the page

How can I use JavaScript to change the minimum value onload? I tried the following code but it didn't work: <script type="text/javascript">$(document).ready(function(){ $("#quantity_5c27c535d66fc").min('10'); });</script> ...

javascripthtmlinput

Tips for expanding a fabric canvas to match the entire width of its parent division

specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...

javascripthtmlcsshtml5-canvasfabricjs

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

htmlcsstwitter-bootstrapresponsive-design

Error: webpack is failing to load the style and CSS loaders

I'm currently experimenting with the FullCalendar plugin from fullcalendar.io. They recommended using Webpack as a build system, which is new to me. I managed to set up the calendar functionality after some research, but I'm facing issues with th ...

javascriptjavacssnpmwebpack

Building a Loading Bar with Two Images Using JavaScript and CSS

I am currently experimenting with creating a progress bar using two images: one in greyscale and the other colored. My goal is to place these two divs next to each other and then adjust their x-position and width dynamically. However, I'm having troub ...

javascripthtmlcss

Creating an HTML list based on a hierarchical MySQL table structure

I have retrieved a hierarchical table showing different elements and their parent-child relationships as follows: id| name | parent_id | header 1 | Assets | 0 | Y 2 | Fixed Assets | 1 | Y 3 | Asset One | 2 | N 4 | ...

javascripthtmlvue.js