The CSS Inline-Grid counterpart in Bootstrap 4

I am looking to showcase a list of items on a desktop web page in a dynamic grid format.

<div class="departments">
@foreach (var department in Model)
{
<div>
    <img src="department_photo.png" />
    <div class="details">
        @Html.DisplayFor(modelItem => department.Description)
    </div>
</div>
}
</div>

My goal is to have the items displayed in three auto-wrapping columns, creating a visually appealing layout. For example, if there are four items in the list:

A B C
D

And with 11 items:

A B C
D E F
G H I
J K

To achieve this using Bootstrap 4 for responsiveness, my challenge lies in finding a way to avoid manually separating rows. In regular CSS, this could be done as shown below:

.departments {
    display: inline-grid;
    grid-template-columns: auto auto auto;
}

Answer №1

It appears that achieving the layout you desire can be easily accomplished using Bootstrap's grid system. The flexibility and popularity of Bootstrap's grid make it a go-to choice for many developers.

Note: Please disregard the CSS code, as it is simply used to enhance cell highlighting on hover.

.col-4 {
  transition: background-color .3s ease-out;
  padding: 15px;
  background-color: #f5f5f5;
}
.col-4:hover {
  background-color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-4">Item 1<br>second line</div>
    <div class="col-4">Item 2</div>
    <div class="col-4">Item 3</div>
    <div class="col-4">Item 4</div>
    <div class="col-4">Item 5<br>second line</div>
    <div class="col-4">Item 6</div>
    <div class="col-4">Item 7</div>
    <div class="col-4">Item 8</div>
    <div class="col-4">Item 9<br>second line</div>
    <div class="col-4">Item 10</div>
    <div class="col-4">Item 11</div>
    <div class="col-4">Item 12</div>
    <div class="col-4">Item 13<br>second line</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

What is the significance of the border classes having an overriding color property in Bootstrap?

When adding a border to my navigation menu, I initially thought using the Bootstrap .border class would be the best approach. However, upon examining the code generated by this class, I noticed that it uses an !important declaration on the color property ...

Creating a dynamic table layout with Bootstrap

Can someone help me figure out how to make this table responsive using Twitter Bootstrap 4? Here's the JS Fiddle Link for reference. <div class="some-table-section"> <div class="container"> <table class="table some-table"> ...

Is it possible to eliminate the border of an HTML element when clicked, while still keeping the border intact when the element is in

I am currently developing a project with an emphasis on Web accessibility. Snippet of Code: function removeBorder(){ li=document.getElementById("link"); li.classList.add(".remove") } body{ background:#dddddd; } p:focus{ border:1px solid red; } li{ ...

What exactly is the significance of "utilizing a universal class name"?

In my current project, I am utilizing Material-UI version 3.1.2 to create the interface. Previously, when I was using Bootstrap4, I included style="overflow-y: scroll; height: 100%" in my head tag to ensure a scrollbar is always present, preventing the ap ...

Animating SVG elements using CSS

After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon ho ...

Enhancing OpenSeadragon images with custom overlays and managing error messages

Currently, I am experimenting with the Basic Single-Row Tile Source Collection example using the same configurations and tile sources outlined in the example. However, I am encountering difficulties in adding overlays to the first and second images as int ...

Add a border to the element if its height exceeds 300 pixels

My web page has a dynamic element with an unpredictable height. As more content is added, the element grows, but I have restricted it with a max-height: 300px;. However, I would like to add a hint to the user when the element reaches its maximum height by ...

Issues arise in mobile Safari when attempting to load JavaScript files, resulting in

Encountering an issue with my Angular app on mobile Safari during the initial load, where it hangs on a blank page for nearly 2 minutes. Interestingly, the app functions perfectly on other browsers, including Mac Safari and iPad Safari. Initially, I suspe ...

Create containers on the right side using HTML

Struggling to align the small boxes on the right side while keeping the left boxes from blending under them? I've attempted various solutions, but each time it seems like the code breaks. By the way, I utilized a generator to create the grid. Here is ...

`Balance in structure`

Having trouble with CSS. I would like to make this form symmetrical. Buttons should be in one column, textfields in another, and the question mark should also have its own column. Apologies if the ticket structure is not perfect, this is only my second on ...

Define the width of jqgrid

I have been utilizing SmartAdmin jqgrid to showcase data in tabular format. The number of columns in the datatable changes dynamically each time. I am converting the DataTable to a JSON object and assigning it to the jqgrid. However, it appears that jqgrid ...

Numerous overlay triggers

Whenever I try to click on an image to activate the overlay, it seems to only work for one specific id and not for any others. Here is the code snippet: <div id="trigger-overlay"> <div class="portfolio web" data-cat="web"> <div id=" ...

Exploring Django's view field for efficient data rendering

Is it possible to display multiple views for a single page/template? For instance, imagine a website where users can submit movie reviews and read others' reviews as well. Now, I need to add an edit button to the review pages but only want the button ...

Understanding the Importance of CSS Specificity in Resolving Selector Conflicts

I need help with a specific pseudo-class selector issue. Even with !important, the text in the li:first-child element is not appearing in blue. The selector specificity for p is: (0, 0, 1) The selector specificity for li:first-child is: (0, 1, 1) I want ...

What methods can be used to stop a bootstrap 4 column from decreasing in size when the text is shorter?

I created a razor page featuring a three-column grid format structured like this: @for (int i = 0; i < Model.Questions.Count; i++) { <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 align-self-center order-first">Quest ...

Introducing the latest Bootstrap 4 update: craft your own unique CSS designs

I am currently working on developing a custom CSS for the recently released version of Bootstrap 4. After downloading the source files, I noticed that there is no Gruntfile.js like the one I used for v4.alpha6. As I refer to the V4 documentation: V4 doc I ...

Ways to apply CSS in jQuery using various combinators

I'm facing an issue with changing CSS using jQuery. The specific CSS line I want to modify is: .switch-vertical input ~ input:checked ~ .toggle-outside .toggle-inside { top: 40px; } My attempt at changing it looked like this: $('.switch-vertic ...

What could be the reason for the excess white space at the top and bottom of the page?

Once I implemented a new div class to incorporate a background image, the top, bottom, and side menus on my page suddenly turned white. style.css #boundless{ background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branc ...

Tips for designing a doodle logo that includes a magnifier lens effect when hovered over

I have a vision for a unique and creative logo solution that involves incorporating a magnifier glass effect. When a user hovers over a certain area of the logo, I want it to zoom in with a magnifier glass effect. I haven't been able to find much info ...

Issue with custom font display malfunction

I'm having difficulty getting my custom @font-face to function properly. When I apply this class style to a <p>, it always defaults to Arial. Can anyone point out what might be going wrong here? <style> .stonefont @font-face { font-fa ...