Using Bootstrap's fourth version grid system

Struggling with creating a layout on bootstrap4? Here's a code snippet to help you out. Thank you in advance!

<div class="col-8">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <img class="card-img" src="img.jpg">
        </div>
    </a>
</div>
<!-- more code snippets here -->

Current layout:

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

Desired layout:

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

htmlcssbootstrap-4

Answer №1

Applying the float: left; style to the columns will create the desired effect.

In the example below, I substituted the <img> tag with a <div> with a border to achieve the same look since I do not have access to img.jpg. Reverting to the original <img> tags should still maintain the functionality.

I incorporated the styling into the col classes by simply adding:

.col-4, .col-8{
    float:left;
}

However, I recommend creating a separate class for the outer divs instead of relying on Bootstrap's classes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"
          integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<style>
    .small-card {
        height: 60px;
        width: 100%;
        border: solid 2px #333;
    }

    .large-card{
        height: 120px;
        width: 100%;
        border: solid 2px #333;
    }

    .col-4, .col-8{
        float:left;
    }
</style>
<div class="col-8">
    <a href="#">
        <div class="card">
            <div class="large-card"></div>
        </div>
    </a>
</div>
<div class="col-4">
    <a href="#">
        <div class="card">
            <div class="small-card"></div>
        </div>
    </a>
</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

Implement modals using a for loop in Vue

I am facing an issue while trying to create modals for cards within loops. I attempted using v-bind:id="masa._id" and v-bind:data-target="'#'+masa._id", but the modal is not working. Can someone guide me on how to implement modals in loops? Belo ...

htmlvue.jsbootstrap-modal

What is the most streamlined way to send data from HTML forms using solely JavaScript?

I currently employ jQuery to transmit data from my HTML forms and then I utilize PHP to save it in my database. Below is the code snippet that I am using: HTML FORM: <form id="formpost" action="" method="post" onsubmit="return false"> <input t ...

javascriptphpjqueryhtmlajax

Shell script for swapping all occurrences of :*; with a comma

Below are some CSS color variables defined in hex: --state-success-text: #3c763d; --state-success-background: #dff0d8; To create a comma-separated list of these color variables, the output should look like this: state-success-text, state-success ...

cssbashsedcss-variables

Guide to opening a link in a new tab within the same webpage

I have observed numerous web applications that feature a single web window with multiple links. When clicking on the links, the corresponding form opens in a new tab within the same web page of the application. I'm curious about how to achieve this fu ...

jqueryhtmlcssajaxjquery-ui

Switching on click using jQuery

I'm having some difficulties with my code and I can't quite figure out how to solve the problem at hand. To be honest, I'm not even sure what the exact question is here. If it seems a bit confusing, I apologize - I'm still new to Jquery ...

javascriptjqueryhtml

What is the best way to add the ".html" suffix to pages in nuxt.js?

Is it possible to add the ".html" extension to a page address? For instance, changing "test_page" to "test_page.html" ...

htmlvue.jsnuxt.js

The issue of not being able to go fullscreen with a YouTube iframe nested within another iframe

I have a YouTube video embedded inside another iframe, but I am facing an issue where the fullscreen feature is not working even after enabling all the required attributes. If the video isn't displaying properly in the code snippet below, you can vie ...

javascripthtmliframeyoutubeyoutube-api

Acquiring the content of elements contained within a div container

On a webpage, I have included multiple div elements with unique IDs and the following structure: <div class="alert alert-info" id="1"> <p><b><span class="adName">Name</span></b><br> ...

javascriptjqueryhtml

Hover Effect for Bootstrap Gallery

I've created a hover effect for my gallery that is embedded in a Bootstrap Grid. Although the hover effect itself works fine, on some screen sizes, the overlay ends up covering the gallery images. Does anyone have any ideas, solutions, or hints to so ...

htmlcsstwitter-bootstrap-3image-gallerymousehover

What mistakes have I made in this CSS code?

Check out the REQUEST FORM in the image below (with a green background). It is currently aligned at the top, but I would like it to be centered vertically. https://i.sstatic.net/4A6Tw.jpg This is the CSS style being used, .rtitle { background-color: Gre ...

htmlcss

What are the steps to add 8 columns to the second row in my table?

this is an example of HTML code that showcases a table structure with multiple rows and columns. You can view the full code snippet here. The table includes different sections, such as section1, section2, section3, and section4 in the first row (tr). In t ...

javascriptjqueryhtmlcss

Is there a way to align these buttons in the middle?

I am currently designing a webpage at The challenge I'm facing is: How can I center those buttons on the page? They need to remain centered and responsive even when the page is resized. Additionally, the spacing between the buttons is inconsistent. ...

htmlcsstwitter-bootstrapbuttonresponsive-design

Navigating with Express while incorporating React

I am struggling to set up the routes for my web application using Express, as well as incorporating React for the front end. The issue lies in properly routing things when React components are involved. My index.html contains: <script> document.get ...

javascripthtmlreactjsexpress

Tricking Vuejs into triggering a @change event

I possess the following: <input type="radio" :name="activity" v-model="activity" :value="1" v-on:change="callProc(data, data2)" required> Ho ...

htmlvue.js

Problem with modals not triggering within the iDangero.us swiper

I am encountering an issue with the iDangerous.us Swiper where I cannot activate any events within the swiper-wrapper. I am attempting to trigger a modal on each slide but nothing is happening. Any Modal placed inside the swiper-wrapper does not work. I a ...

javascriptjqueryhtmlmodal-dialogswiper.js

Attempting to build a table within a table structure

My goal is to create a nested table structure similar to this image: https://i.sstatic.net/v6lZo.png The number of months, topics, and arguments for each topic can vary as they are retrieved from a database. I have attempted to implement this functionali ...

htmlangulartypescriptbootstrap-4

Issues with Curved Corner Touchdown Feature

Having trouble with getting the round css to work properly in the below code It seems to be only applying the background color, but not the border styling The border code is on the same line as the round css: style=" border : 1px solid #D6D6D6; and t ...

htmlcss

Retrieving Text following an HTML Element with a Parsing Tool

I'm currently utilizing PHP Simple HTML DOM for the development of a web scraper application. Here is the HTML structure from which we need to extract the City/State name, such as "Daviston, AL" in the example below. Can anyone assist me wi ...

phphtmlsimple-html-dom

jQuery looking to eliminate the need for numerous click events

Check out my latest project on my website: . The site features four colored squares, each with unique classes. I'm looking to streamline the code by implementing if and else statements. However, I'm not sure where to start so I'm reaching o ...

jqueryhtmlsimplification

The button is unable to contain all the text, causing it to spill out instead of wrapping to

Need help with creating an HTML button that opens a link. The button consists of a title and a short description, but when the description is too long, it overflows outside the button. Currently implementing bootstrap and jquery. Code: body { backgr ...

htmlcsstwitter-bootstrap-4