Utilizing Flexbox at Small Screen Sizes in Bootstrap 4

Is there a way to apply the class d-flex to my element only on small screens? I couldn't find a solution in the documentation (https://getbootstrap.com/docs/4.3/utilities/flex/). I tried using d-sm-flex, but it seems to work for small screens and up.

Can someone help me figure out how to make flex work just for the sm breakpoint? Or do I need to create this functionality myself?

This is the code I'm currently using:

<ul class="nav d-sm-flex">
  <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
  <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
</ul>
csstwitter-bootstrapflexboxbootstrap-4

Answer №1

To ensure the styles override for the next breakpoint, you should add another one. In this case, for the md breakpoint, set it back to block which is the default.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1N" crossorigin="anonymous">
<ul class="nav d-sm-flex d-md-block">
  <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
  <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
</ul>

In addition, as the nav is already a flexbox container, you can remove d-sm-flex:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1N" crossorigin="anonymous">
<ul class="nav d-md-block">
  <li class="flex-fill nav__item"><a href="#" title="Home">Home</a></li>
  <li class="flex-fill nav__item"><a href="#" title="About">About</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Services">Services</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Blog">Blog</a></li>
  <li class="flex-fill nav__item"><a href="#" title="Contact">Contact</a></li>
</ul>

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

Exploring the art of styling in Angular6

I am looking to change the text color when a specific ID is clicked <nav class="navbar "> <ul class="navbar-nav"> <li *ngFor="let item of items"> <a class="nav-link" >{{item.title}}</a> ...

cssangularhtml

Modify the hue of the div as soon as a button on a separate webpage is

Looking for assistance with a page called "diagnosticoST" that contains four buttons (btn-institucional, btn-economico, btn-social, btn-natural). These buttons have different background colors until the survey inside them is completed. Once the user comple ...

javascriptjqueryhtmlcss

Problem with see-through images against a see-through backdrop

I'm experiencing a strange issue with a graphic that has rounded corners. On my HTML page, I have the body set to transparent (style="filter:alpha(opacity=100);opacity:100;background-color:transparent;"), and within this body is a div containing a PN ...

cssiframepngtransparencygif

Parent element unable to trigger event due to interference from child elements

Within my HTML document, there is a parent <span> element that contains nested <em> elements. This <span> is styled with a specified width and display:block property using CSS. Despite a jQuery trigger event being successfully fired on t ...

jquerycsstwitter-bootstrap

Can JSS support creating variables similar to Sass?

Currently, I am developing a project in React and utilizing Material-ui with JSS for styling. In Sass, we have the ability to define variables like $color: rgb(255, 255, 255) for later use. I am curious if it is possible to implement variable usage simi ...

cssmaterial-uithemesjss

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Animate the page transition with jQuery once the CSS animation finishes

My screen is split in two halves, and when you click on a side, they are supposed to slide open like curtains and then fade into another page. I have successfully created the animation using CSS and jQuery to add the appropriate class on the click event. ...

javascriptjqueryhtmlcssanimation

Every time I make a change to the code, Laravel's css/app.css file mysteriously vanishes from the mix-manifest.json

Whenever I make a change in my code, the line css/app.css in mix-manifest.json disappears. The only solution is to execute npm run watch or npm run dev, but the problem reoccurs each time I modify the code. Here is how my mix-manifest.json looks when eve ...

csslaravelnpmmodulemanifest

The functionality of Laravel registration is currently being disrupted by hidden fields

Recently, I started using Laravel and encountered a problem with my registration form. In the form, there is a select dropdown refer here that contains two options - Faculty and Student. When a user selects Student, fields for grade and section should be ...

javascriptphphtmlcsslaravel

Press the button obscured by an image

Recently on my HTML website, I encountered an issue where I tried adding a transparent image over a button but found that I was unable to click on the button afterwards. The problem seems to be related to the following code snippet: #container { heigh ...

javascriptjqueryhtmlcssweb

Is there a way to align text in the middle while having different icons on each side?

Is there a way to center align the text in this image with minimal use of CSS/HTML? The icons on the left are causing it to be off center: https://i.sstatic.net/TKOYG.png Below is the relevant HTML and CSS for this top section: <div class="navbarhead ...

htmlcsstwitter-bootstrapflexbox

The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video. https://i.sstatic.net/DCzWy.jpg After removing the background-size: cover; in the home section, it appears like this: https://i. ...

htmlcss

How to modify the background color within the mat-menu-panel

Incorporating angular 9 and less into my current project, I have encountered an issue with a mat-menu-panel where my mat-menu-item is located. While I have successfully changed the color of my mat-menu-item, I am now faced with the challenge of changing th ...

cssangulartypescriptless

Creating a segmented button utilizing HTML, CSS, and Bootstrap

To create a segment button using only HTML, CSS, and Bootstrap, refer to the example in the image below. It's important to understand the difference between toggle and segment buttons. A toggle button switches states on click, while a segment button c ...

htmlcssbootstrap-4

I want to display a div above an image when hovering over it

.vpbutton {padding:4px;background-color:#EFEFEF;} .userbox img{padding:8px;background-color:#EFEFEF;} .userbox img:hover{opacity:.2;} <div class="userbox"> <img src='img.png' style='height:120px;width:120px;border:1p ...

jquerycss

Toggle the visibility of image elements depending on the input entered in the search bar using jQuery

I have a photo gallery grid and I am looking to implement a search functionality for an img tag's 'data-title' value, where only images with matching data will be displayed. For example, if I type "hay" into the search box, only the image be ...

javascriptjqueryhtmlcsstoggle

Ways to eliminate spacing from a bullet point in a list?

Is there a way to eliminate indentation from ul? I attempted adjusting margin, padding, and text-indent to 0, but with no success. It appears that setting text-indent to a negative value works - but is this the only solution for removing the indentation? ...

htmlcss

Erase blob_over from the Wordpress menu hover effect

I've created a unique style for the Donate button on this website, but I'm struggling to remove the hover effect. Any suggestions on where to start? Website URL: This is my Custom Class CSS: .donate { background:#4A1383; padding:0px 10px 0px 1 ...

css

Triangles positioned on the edges of a division element

I am attempting to create a DIV with angled corners, as depicted in the image below: https://i.sstatic.net/1a9LY.png So far, I have successfully implemented the top right corner using a tutorial. Here is the code snippet that accomplishes this: .lifeatb ...

css

Achieving full-width container on mobile devices with Bootstrap

Despite my efforts in the CSS file, I am still struggling to get the container to take up the full width on mobile devices. Here is my CSS code: @media (max-device-width: 1024px) { .col-sm-2{ width: 100%; } .container { margin: 0 auto; width: ...

htmlcssbootstrap-4