Utilizing Bootstrap 4 to arrange each card in its own row

On small screens, I want Bootstrap to display 1 card per row, 2 cards per row on medium screens, and 3 cards per row on large screens.

I'm using 

<div class="col-sm-12 col-md-6 col-lg-4">
and it's working for medium and large screens, but on small screens it still shows 2 cards per row instead of 1.

Additionally, I want the navbar to be at the top on the smallest screens and on the left side on all other sizes. It seems to be the same issue as with the cards.

Check out my code here: https://codepen.io/anon/pen/ZPQWKd

htmlcssbootstrap-4

Answer №1

When designing for mobile phones, consider using the col-xs class.

For example, instead of:

<div class="col-sm-12 col-md-6 col-lg-4">

You can use:

<div class="col-sm-12 col-md-6 col-lg-4 col-xs-12">

For more information, refer to the documentation here.

Answer №2

In Bootstrap-4, remember to use the class col-{number} for small devices.

For example, col-12 represents a 12 column grid in small devices.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="row">
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
           <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

       </div>
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
       <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549805308-061c5e00ff9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
       </div>
       <div class="col-lg-4 col-md-6 col-sm-12 col-12">
       <div class="card mb-2" style="width: 18rem;">
  <img src="https://images.unsplash.com/photo-1549948558-1c6406684186?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" class="card-img-top" alt="..." height="150">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
       
       </div>
    </div>

  </body>
</html>

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 Intersection of HTML5 File API and AJAX Chunked Uploads

Recently, I created a drag and drop multiple file upload feature with individual progresses, which has been working well. However, there is one issue that I have encountered. During the uploading of larger files, sometimes the browser freezes until the upl ...

ajaxhtmluploadfilereaderchunking

HTML5 canvas game issue: background fails to load

I'm a beginner at designing games using HTML5 canvas. I've been following a tutorial on creating games in the style of Angry Birds from the 'pro html5 games' book. I've completed all the steps in the tutorial, but I'm facing a ...

javascripthtmlcanvas

Leveraging the power of beautifulsoup and selenium for web scraping on a multi-page site results in gathering a

I am in the process of scraping text from a website iteratively. Each page on this particular website follows the same html structure. I utilize selenium to go to the next page each time I add the following strings: text_i_want1, text_i_wantA, text_i_wantB ...

htmlpython-3.xseleniumbeautifulsoupslice

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

javascripthtmlangularformstypescript

How can you set a condition for when no matches are found in a list filter?

I recently came across a fascinating example on W3 Schools that taught me how to implement a search filter. Below, I have customized it for everyone's reference. I am interested in modifying it to only display a list item with the message: No matche ...

javascriptjqueryhtmlbootstrap-4html-lists

Remove the color gradient for the column headers in the Google Visualization table

Whenever I attempt to change the colors of the column headers using the method demonstrated in this insightful source, a rather generic gradient is applied. Interestingly, the example code provided also demonstrates the same default gradient on the secon ...

cssgoogle-apps-scriptgoogle-visualization

How to use CSS to align a link vertically next to an image

UPDATE: Apologies for the duplicate post, I am still learning the ropes of CSS. However, I would appreciate it if someone could shed light on why aligning the image is preferable to aligning the link or text. Is there a broader concept in play here that ...

csshtmllayout

Discover the ultimate guide to harmonize IE 9 with the ingenious Bootstrap Multiselect plugin developed by davidstutz

I've come across an amazing plug-in developed by David Stutz that allows for a Bootstrap and jQuery multi-select options list. Here are some resources: Check out the source code on Github Find documentation and examples here This plug-in works fla ...

jqueryhtmlcsstwitter-bootstrapbootstrap-multiselect

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

htmlcsswordpressbootstrap-4

Utilizing SetInterval for dynamically changing the CSS background image URL

I'm starting to feel frustrated with this situation... I have a solution where the CSS background is coming from a webservice. Currently, the system refreshes the entire page using HTML: <meta http-equiv="refresh" content="300" /> ... body { ...

javascriptjqueryhtmlcsssetinterval

When the add button is clicked, I would like to implement a feature where a checkbox is added

When the user clicks on the link "출력하기", I want the web page to add a checkbox to all images. I wrote this code, but it's not working. Can anyone help me? This is my JS: $(document).ready(function(){ $("#print").on('click', fu ...

javascripthtmlimagecheckbox

With a simple click of a button, I aim to have the ability to set a variable to true

I am looking to create a button that changes to true in the Script section. This will allow for a random number to be displayed in the paragraph element. <!doctype html> <html> <button id="button"> random number </button> ...

javascripthtmlcss

Ensuring a fixed table with vertical scrolling only, no horizontal scrolling, while scrolling in either direction

I'm working with an HTML fixed design that contains a center-aligned table with extensive data scrollable both vertically and horizontally. To address the issue of keeping column headers visible when scrolling vertically, I used jQuery's clone() ...

javascriptjqueryhtmlcssposition

What is the best way to add a dropdown menu in front of a button?

I have a div containing a dropdown list of items and I want the user to be able to add more dropdown lists by clicking a button. Although I managed to do this, the issue I'm encountering is that the new list gets added after the button instead of ben ...

javascriptjqueryhtmldom

Utilize AJAX to dynamically refresh the page without having to reload it, enabling the use of both POST and GET methods

In order to avoid reloading the page when refreshing, I am utilizing Ajax for this particular 3-sided content along with JavaScript. Here is the code: Content: <ul id="nav"> <li><a href="ajax_adat.php?id=8&epul=0">Data</a>< ...

javascriptphpjqueryhtmlajax

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

javascripthtmlruby-on-railsajax

Tips on eliminating extra whitespace in cards

I have created a card with an image and some content, but there seems to be unwanted space between the two elements. How can I remove this space so it looks consistent across all devices? Here is the HTML code: <div class="project-card hidden" ...

htmlcss

Generate several invoices with just a single click using TypeScript

I'm interested in efficiently printing multiple custom HTML invoices with just one click, similar to this example: https://i.sstatic.net/hAQgv.png Although I attempted to achieve this functionality using the following method, it appears to be incorr ...

javascripthtmlcssangulartypescript

Tips for choosing the right element in CSS

Can someone help me with this issue? https://i.stack.imgur.com/pBu1w.png I've tried setting a CSS selector, but it doesn't seem to be working as expected. What could be causing the selector to not work properly? Any suggestions on how I can f ...

css

Adding a class name to the three active, visible, and shown slides in SwiperJS is a simple process that can be done by

Currently, I am working on customizing a carousel in Swiper with slidesPerView={3}. My goal is to style the sliders that are not visible on the screen. I have made multiple attempts to achieve this: First, I tried adding the attribute slideActiveClass="sw ...

cssnext.jsslidercarouselswiper.js