Bootstrap Grid System

I'm currently developing an Image Gallery using Bootstrap, but I've encountered a problem. I am unable to arrange four images in a specific layout - two on top, three below the top ones, and a vertical image in the left corner. Currently, the vertical image is positioned below the others.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
            <img class="img-responsive col-md-4" src="img/gallery/potok.jpg">
        </div>
     </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
            <img class="img-responsive col-md-5" src="img/gallery/simon.jpg">
         </div>
     </div>

Any suggestions on how I can achieve this layout? View the desired image here.

javascripthtmlcssbootstrap-4

Answer №1

You can nest classes and elements within each other;

For example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <img src="http://dummyimage.com/300x600" class="col-4">
    <div class="row wrap col-8">
      <img src="http://dummyimage.com/300x330" class="mb-auto col-6">
      <img src="http://dummyimage.com/300x330" class="mb-auto col-6">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
      <img src="http://dummyimage.com/300x450" class="mt-auto col-4">
    </div>
  </div>
</div>

Answer №2

Here is a recommendation

.col {
  margin: 5px;
  height: 200px;
}

.col-4 {
  margin: 5px 0px;
}

.col-4,
.col {
  background-image: url(https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img-3.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
    <div class="row">
      <div class="col"></div>
      <div class="col"></div>
    </div>
  </div>
  <div class="col-4"></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

Executing the `process.nextTick` function throws an error, causing the message: "Headers cannot be set once they have been sent."

I'm attempting to retrieve data from MongoDB within a Node.js file. I am encountering the following error: /home/jay/node_project/user_data_manag/node_modules/mongodb/lib/utils.js:98 process.nextTick(function() { throw err; }); Error: Can't ...

javascriptnode.jsmongodbexpress

Tips for refreshing the appearance of a window in angular when it is resized

I have a chat feature integrated into my application. I am looking to dynamically resize an image within the chat window when the width of the window falls below a certain threshold. Is there a method available to modify the CSS style or class based on the ...

cssangulartypescript

The Gatsby plugin image is encountering an error due to a property that it cannot read, specifically 'startsWith

While browsing the site, I couldn't find a solution to my issue, but I stumbled upon an open bug on Github. The only workaround mentioned at the moment is to utilize GatsbyImage. As I delve into converting a Gatsby project from version 2 to 3, I have ...

javascriptreactjsgatsbygatsby-image

What is the recommended lifecycle hook in Vue.js2 to execute a function when the page is loaded?

I have a dynamic table that can be filled with various numbers of rows, and I want to add an overlay before the data is loaded using my applyOverlay() function. Below is the structure of my HTML: <table id="table" class="datatable" s ...

javascriptjqueryvue.jsvuejs2lifecycle

Elements recognized worldwide, Typescript, and a glitch specific to Safari?

Consider a scenario where you have a select element structured like this: <select id="Stooge" name="Stooge"> <option value="0">Moe</option> <option value="1">Larry</option> <option value="2">Curly</option ...

javascripthtmldomsafaritypescript

Error in Vue console: Uncaught TypeError - The variable "_ctx" is not defined on the specified value

I'm encountering an issue that is puzzling me: Everything seems to be working perfectly as I try to display data from an API. However, I keep getting an error stating that personnel.departmentID is undefined, and unfortunately my vue-debug tool isn&a ...

javascriptvue.jsvuejs3

Error SCRIPT438: Property or method not supported by object in Internet Explorer

Within my application, there is an option for users to deactivate their profiles, which can only be reactivated by the admin. I have created a class called ActivateProfile with two methods: userExist(userName) to check if a user with the given userName ...

javascriptinternet-explorer

Efficient Electron Tool for Simplified Data Management Tasks

Although I primarily work as a RoR developer, I am now exploring Electron for creating desktop applications. I have limited experience with JavaScript, but I am determined to keep this project completely local, including writing data to text or JSON files. ...

javascriptsqljsondatabaseelectron

When implementing Critical CSS, the Jquery function fails to execute upon loading

Currently, I am working on optimizing my website at . In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse. However, ...

javascriptjquerycssoptimizationresize

Updates to Firebase data do not automatically reflect in Google Charts

I've successfully connected my Firebase to Google Charts, however I am facing an issue in displaying a 'no data' message when there is no data available. Currently, I have set a Firebase data value of 'NA' for a single user, which ...

javascriptjqueryangularjsfirebasegoogle-visualization

Capturing user input in HTML and passing it to JavaScript

I have a good grasp on how to implement input in HTML to execute JavaScript functions that are defined in the same directory as the HTML file. For example: <input type="button" value="Submit" onclick="someFunc(500)" > When the button is clicked, th ...

javascripthtml

Arranging Divs next to each other, ensuring uniform column heights, within a ContentPlaceHolder in ASP.NET

I am attempting to create a layout with three columns. The left and right columns will each contain a button that should remain aligned with the outer border of the container. In the center column, there will be an asp:Table generated dynamically, ranging ...

asp.netcsshtmlvertical-alignment

How can I create and utilize a nested array within an ngFor loop?

*ngFor="let arr = ['foo', 'bar', 'sla']; let item of arr; let i = index;" Why does setting the instantiation of arr before let item of arr; result in an exception displaying [object Object]? Why am I unable to structure it th ...

javascripthtmlarraysangulartypescript

Issue encountered while attempting to retrieve a value from PostgreSQL due to undefined req.params

Hi there, I'm currently working on setting up a reset password route using EXPRESSJS but have run into an issue. The route I am using is /reset-password/:resetToken. To get the token, I am using const token = req.params.resetToken Even though loggin ...

javascriptnode.jsexpress

Sticky footer in Bootstrap causing content to overlap

I'm a beginner when it comes to Bootstrap, and I'm attempting to integrate it with Symfony2. I currently have a sticky top bar in place for navigation purposes. However, I'm facing an issue when I try to add a similar sticky footer at the bo ...

htmlcsstwitter-bootstrap

Node.JS is flagging a TypeError with the message [ERR_INVALID_ARG_TYPE]: The argument provided for "path" must be a string

As a newcomer to Node.js, I recently embarked on developing a basic movie API application using node.js. By utilizing express-generator, I initiated the app creation process. However, I encountered an error that has proven difficult for me to resolve. In ...

javascriptnode.jsexpressexpress-generator

Stop right-floating elements from switching positions

Every time I float two elements to the right, they end up getting swapped. This issue doesn't seem to happen with left floated elements and occurs consistently across all browsers. For example: CODE: <style type="text/css"> .right { ...

htmlcsscss-float

What is the process for retrieving the response from a form_tag in a Rails application?

I am facing an issue with a form that submits information to the database. The form is displayed on a modal popup, and upon clicking the submit button, a new popup appears with two buttons. However, these buttons remain inactive until the controller call i ...

javascriptruby-on-railsrubyjson

equal child width as parent column container

I'm in the process of developing a custom dropdown search bar that presents results as the user enters text. One issue I'm facing is that the list of results must have a position: absolute. This causes it to disregard the width of the parent col ...

htmlcsstwitter-bootstrap

Creating the Apk file for your sencha touch application

Hello there! I'm diving into the world of Sencha Touch as a new user. After installing all the required tools and SDK, I successfully set up the demo example that came with project creation via command line. Now, I'm eager to generate the APK fil ...

javascriptjquerycsshtmlsencha-touch