Exploring Bootstrap 4: Creating list-inline elements for various screen sizes

Is there a way to align list items on top of each other for a breakpoint <=575px (xs), and align the items next to each other for a breakpoint >575px (sm) using Bootstrap display properties?

I found some information on How to display a list inline using Twitter's Bootstrap suggesting the use of 'list-inline'. Here is an example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

While this method works in general, I'm not sure how it behaves with different breakpoints. Typically, Bootstrap allows setting breakpoints using notation like 'd-sm-block' (visible only on min-width: 576px), but there seems to be no specific documentation about 'list-inline' in relation to breakpoints.

csstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

Currently, Bootstrap v4.3 does not provide direct support for the list-inline class; instead, it is considered a utility function applicable across all breakpoints. There are no indications of this feature being included in future versions either, as evident from the absence of references to it in the shiplist v4.4 on Github and onwards.

To achieve your desired layout using only Bootstrap utilities, you can utilize the Display utility class d-{breakpoint}-inline-flex. Additionally, the Spacing utility class ml-{breakpoint}-{size} can be employed to manage spacing adjustments tailored to specific breakpoints.

To preview the implementation, please view the snippet below in either Full Page mode or by expanding the snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<ul class="list-unstyled d-sm-inline-flex">
  <li>Lorem ipsum</li>
  <li class="ml-sm-3">Phasellus iaculis</li>
  <li class="ml-sm-3">Nulla volutpat</li>
</ul>

Answer №2

According to the documentation provided, the Display classes are compatible with all types of CSS display: values. This means that using d-sm-inline or d-sm-inline-block will produce the desired effect.

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 combination of two equal height elements with absolutely positioned child elements

I have a website that features a side-bar navigation and a main content pane, both enclosed within a container element. The content has its own unique background styling, while the menu adopts the background of the parent container. In situations where th ...

htmlcsscss-position

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

I've utilized d3 to create a map. Its width is dynamically set based on the parent div's (with the id "map") width, and its height is calculated with a ratio of 5/9 in relation to the width. The viewBox attribute has been defined as "0 0 width he ...

javascriptjquerycsssvgd3.js

The Elusive Solution: Why jQuery's .css() Method Fails

I am currently facing an issue with my code that utilizes the jQuery .css() method to modify the style of a specific DIV. Unfortunately, this approach does not work as expected. To illustrate the problem, I have provided a simplified version of my code bel ...

javascriptjquerycss

Unable to locate a resolution for the error message "Warning: Task "uglify" not found"

Below is the content of my Gruntfile.js: module.exports = function(grunt) { require('load-grunt-tasks')(grunt); grunt.initConfig({ uglify: { start: { files: { 'js/script.min.js': ['js/script.js&a ...

htmlcssnode.jsnpmgruntjs

jQuery animation for expanding accordion headers

I want to create a cool animation for my accordion headers that mimics a ribbon being dragged onto the wrapper when hovered over, and then dragged out when the hover ends. Everything was working fine in this initial jsFiddle, but as soon as I tried to ani ...

javascriptjquerycssjquery-uijquery-animate

Struggling to connect CSS to HTML on Github Pages

I'm new to using Github, and I noticed that when I open the website, my HTML code is displaying without the associated CSS. Here is a snippet of my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

htmlcssgithub

The background suddenly vanishes once the background-image property is set to no-repeat

I'm currently attempting to add a background image to my WordPress website. .content:before { content: ""; background-image: url("gfx/SevenWonders.jpg"); /*background: #fff;*/ background-size:600px 700px; background-repeat: no-repeat; position: absol ...

csswordpressbackground-repeat

What is causing the gradient to not fully extend across the entire element?

In my CSS, I have the following styling for a button: <a class="button"> <span>Y</span> </a> .button { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; ...

cssgoogle-chromewebkitgradient

Tips for implementing a linear gradient on a bar graph using Highcharts

I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas? Here is an example of what I'm hoping to achie ...

jquerycsshighcharts

Exploring Techniques for Streamlining HTML/CSS Editing in Browser

Is there a way to automatically edit specific lines on websites right after they load? Specifically, I want to change <div class="1"> to <div class="1" style="display:none">, and <div class="2" style ...

htmlcssgoogle-chrometampermonkey

Enhancing the appearance of jQuery datatables using Material Design Lite theme

I came across a helpful codepen demo demonstrating how to create a responsive data table with search filter and pagination. However, this demo is only integrated with Bootstrap. After searching the MDL discussion forum, I couldn't find any existing im ...

jqueryhtmlcssdatatablesmaterial-design-lite

Resizing modal boxes using Angular

Currently, I am facing an issue with the angular dialogue box where setting a custom size for the box ends up ruining the formatting inside it. To showcase this problem, I have created a plunkr example. You can view it here. If you observe the placement ...

twitter-bootstrapangularjs

Synchronized scrolling and equal height for multiple divs

Looking to create a system similar to GitHub's conflict resolver for my project. I have multiple versions represented by values in columns, and I want to be able to select different values from each column to create a new solution. It's important ...

javascripthtmlcssangular

Tips for positioning a div within a grid:

Looking for help with displaying news on your CMS page? You may have encountered an issue trying to show the title and content in two columns within a row. Here is some CSS code that might guide you in the right direction: *{ margin:0; padding:0; ...

htmlcss

How can you define & specify parameters for iframe using CSS?

Is there a way to style the parameters of an <iframe> using CSS? I am trying to embed multi-track audio from archive.org. For example, like this: <iframe src="https://archive.org/embed/art_of_war_librivox​&playlist=1​&list_height=200 ...

cssiframe

Rearrange element's placement using Jquery Drag & Drop

I am experiencing difficulties in positioning my elements after a drop event. Within my "list" of divs... In order to keep the divs together and update the list, I utilize jQuery's append function to move the element from the list to its designated ...

javascriptjquerycss

Difficulty in implementing a radio button selection form using Django and Bootstrap styles

Currently, I am facing an issue while trying to develop a form with radio button choices using Django. The website is based on Bootstrap 4 theme and encountering a problem where the buttons disappear upon applying the custom-control-input class. I initial ...

pythondjangohtmlbootstrap-4

Managing the clearance of an absolutely positioned div with CSS

I'm encountering an issue where my page contains divs that are 250px x 250px and positioned absolutely. When one of these divs is opened, an ajax call expands the div to display all its contents. These divs have a maximum width of 600px but can vary i ...

htmlcss

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Creating a parent component to reuse multiple times can be very useful. In my case, I have included 5 different icons in each instance of the component, all taken from hero icons. I have set up an object with unique ids for each child component, but I am ...

javascriptcssreactjs

The Drop Down Menu feature in Bootstrap is malfunctioning within the context of a NextJS project

I've built a NEXT.JS application using VS Code. The issue I'm facing is with the drop down menu in the navigation bar - it's not sliding down to display the menu when clicked. Here is the code I'm working with: const loggedRouter = () ...

javascriptjquerybootstrap-4next.jsnavbar