Do not exceed 3 elements in a row when using Bootstrap's col-auto class

col-auto is excellent. It effortlessly arranges items by size in a row, but I need it to strictly limit the number of items in each row to a maximum of 3. Each row should only contain between 1-3 items.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c504c51">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="col-sm-12 col-xs-12 col-lg-4 col-md-6 col-xl-4 col-xxl-4 d-flex align-items-stretch">
  <div class="card border-primary mb-3 mt-2 bg-transparent text-white_disabled w-100">
    <div class="card-header bg-transparent font-weight-500">
      Languages
    </div>
    <div class="card-body">
      <div class="row">
        <li class="col-auto text-nowrap">Rust</li>
        <li class="col-auto text-nowrap">Python</li>
        <li class="col-auto text-nowrap">PHP</li>
        <li class="col-auto text-nowrap">Java</li>
        <li class="col-auto text-nowrap">C</li>
        <li class="col-auto text-nowrap">C++</li>
        <li class="col-auto text-nowrap">Golang</li>
        <li class="col-auto text-nowrap">Kotlin</li>
        <li class="col-auto text-nowrap">Javascript</li>
      </div>
    </div>
  </div>
</div>

Current Output

https://i.sstatic.net/tzSL8.png

Expected Output

https://i.sstatic.net/c8R16.png

htmlcssbootstrap-4bootstrap-5

Answer №1

Is it not better to explicitly define column sizes?

Just so you know, using col-xs-12 col-md-6 col-lg-4 is sufficient instead of listing all variations. Check out Bootstrap's mobile-first approach.

Furthermore, the structure of your list is incorrect. List items should be nested inside list elements.

One more thing, it should simply be referred to as "Go", as Golang is a domain name, not a programming language.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e05190518">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="col-xs-12 col-md-6 col-lg-4 d-flex align-items-stretch">
  <div class="card border-primary mb-3 mt-2 bg-transparent text-white_disabled w-100">
    <div class="card-header bg-transparent font-weight-500">
      Languages
    </div>

    <div class="card-body">
      <ul class="row">
        <li class="col-4 text-nowrap">Rust</li>
        <li class="col-4 text-nowrap">Python</li>
        <li class="col-4 text-nowrap">PHP</li>
        <li class="col-4 text-nowrap">Java</li>
        <li class="col-4 text-nowrap">C</li>
        <li class="col-4 text-nowrap">C++</li>
        <li class="col-4 text-nowrap">Go</li>
        <li class="col-4 text-nowrap">Kotlin</li>
        <li class="col-4 text-nowrap">Javascript</li>
      </ul>
    </div>
  </div>
</div>

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

Ensure that CSS is integrated correctly

I have a main Django template that incorporates another template for the navigation bar. I currently have separate CSS files for both the main page and the navbar. My query is: what is the correct method to include the CSS from the navbar in the main p ...

htmlcssdjangodomdjango-templates

Submit button in contact form SVG not functioning correctly due to incorrect button tag usage instead of input tag

I am using an SVG animated button as the submit button for my contact form. I initially found a solution with the label tag here, but discovered that it does not allow divs inside of it. After some research, I tried implementing a button tag instead, which ...

phpjqueryhtml

PNG images do not display properly in the Bootstrap 4 navbar

Having some trouble adding a png image to the top of my navbar as a logo. Instead of the image displaying, I am only seeing the little photo icon indicating an error. The file is located at resources/img/pdmalogo.png. Any help would be appreciated. Here i ...

bootstrap-4

Arranging the elements in my footer for optimal display

My footer layout expands and the lists in each column become misaligned as I add more links to it. I want to make sure that the lists for each column are aligned horizontally on the same row, with the title of each column also in the same row. levi | ...

htmlcssvue.jsvue-material

Include a proximity button onto the tabs

Currently, I'm diving into learning Bootstrap and one thing I'd like to implement is having an x next to each tab name for easy closing: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

htmlcssbootstrap-5

Navigating with a Stuck Navigation Bar Using BootstrapretaF

My website has a sticky navbar with a dropdown menu that allows users to jump to different sections of the page. However, I've noticed that when I navigate to a new section, the navbar covers part of the content at the top. After inspecting the navbar ...

htmlcssbootstrap-4

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

javascriptjqueryhtmlcssbrowser

Modifying an HTML list item to become 'active' in a navigation bar

One way I've been implementing my navbar on each page is by using the following code at the bottom of the page within script tags: $("#navbar-partial").load("navbar.html). The code for the navbar list looks like this: <ul id="main-nav" class="nav ...

javascriptjqueryhtmlcsstwitter-bootstrap

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted

Hello, I am brand new to web development and have encountered an issue on my website. Whenever the window is resized or viewed on a different screen, the navigation bar (which consists of rectangles and triangles) and text elements start moving around and ...

htmlcss

When the width is set to 100vh, there is excessive white space beneath the div

I'm dealing with a unique situation where I have a horizontal scrollable div containing different elements. To achieve the horizontal scroll, I've set the width: 100vh and rotated the div. However, this is causing an unwanted white space below th ...

htmlcss

Achieving the ideal HTML layout for small screens that differs from larger screens is a common challenge faced by web developers

After implementing the markup code, I achieved the desired layout on large screens. However, when reducing the screen size to a phone level, I require a layout similar to image-3, and on larger screens like laptops, it should resemble image-1. Image-1 and ...

htmlcssbootstrap-4

Refresh a specific div element utilizing jQuery

I am facing a challenge with my data table in my Spring MVC project. I want to be able to update or remove data from the table without having to reload the entire page. Below is an example of the HTML div element: <div id="datatable"> </div> ...

javascriptjqueryhtmlajax

What seems to be the issue with my 2-column design layout?

When I try to arrange my webpage with a 2 column layout, adding an image messes up the footer. Without the image, the footer looks correct. <!DOCTYPE html> <html lang="en"> <head> <title>SuperRestraunt</title> ...

htmlcss

Is it achievable to create shadows that do not overlap?

When you hover your mouse over the pill-shaped object, it should smoothly move over the circle as desired. However, the shadow of the circle still remains visible creating an unwanted effect. I am looking for a solution where the shadows do not overlap but ...

cssbox-shadow

Utilizing a Stylesheet for a Single Element

Is there a way to create a footer and include it using the PHP include function from an external file, but ensure that the stylesheet within it only affects the footer and not the entire page? I typically link stylesheets in the head tag, which applies t ...

htmlcss

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...

htmlcssuser-interface

Using the getElementById function in javascript to modify CSS properties

Here is the setup I am working with: <div id="admin"> This element has the following style applied to it: display: none; I am attempting to change the display property when a button is pressed by defining and utilizing the following JavaScript co ...

javascripthtmlcss

Resizing images using a dynamic frame size

I am in need of some assistance as I am currently facing a roadblock. My goal is to develop a picture framing tool for photos where users can specify the size of their photo, choose a colored cardboard mount, and select a frame type. My client has requeste ...

phpjquerycssajax

How to retrieve the image source using jQuery

<img src="../img/arnold.png" alt="Arnold"> Is there a way to retrieve the absolute path of this image using jQuery? Currently, when I use img.attr("src"), it only returns "../img/arnold.png", but I need it to return something like "http://site.com/ ...

javascriptjqueryhtmlcssimage

Unable to reach the dropdown menu in CSS

Having trouble with creating a dropdown navigation bar? I've encountered an issue where the dropdown menu disappears as soon as I move my cursor off the buttons that reveal it. The menu itself displays properly, but accessing the drop down menu is pro ...

htmlcss