placing the grid elements side by side within the grid system

Hi there, I've been experimenting with React and the UNSPLASH API. When I search for a term, I can see a list of details in the console. After running the map function, I display the images on my screen. What I want to achieve is to have a 12-column grid layout where two images are placed next to each other in each row.

<div className="row">
 <div className="col-lg-12">
 <div className="image-list col-lg-6">
 {images}
 </div>
 </div>
 </div>

CSS File:

.image-list img{
width: 90%;
height: 50vh;
margin-bottom: 40px;
}

However, the current code displays only one image per row. Here's a screenshot of the output https://ibb.co/343Rhb2

How can I correct this issue?

cssbootstrap-4

Answer №1

It is important that the parent element of a 'col... is a 'row...

In this specific scenario,

<div className="row">
  <div className="col-6">
    image should be placed here
  </div>
  <div className="col-6">
    image should be placed here
  </div>
</div>

If you require them to be within a col-12, then

<div className="row">
  <div className="col-12">
    <div className="row">
      <div className="col-6">
        image should be placed here
      </div>
      <div className="col-6">
        image should be placed here
      </div>
    </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

The responsiveness issue with the Bootstrap button menu in my Django project is causing functionality problems

I am currently working on a Django project and have set up a static folder in my "accueil" application. However, when I resize the browser window, the button to show the menu does not function as expected. The template I downloaded for free is not working ...

djangohtmltwitter-bootstrapcss

Ensure that the heading cells in the table header (thead) are properly

Struggling with aligning the thead with the td in the tbody? I attempted adjusting the thead using display: table-header-group;, but discovered that padding doesn't work on 'table-header-group'. This led me to try adding padding-left to my t ...

htmlcssangularjs

Looking to modify the height and width of an image when it is hovered over using inline CSS

My current project involves working with a dynamic template where the HTML code is generated from the back-end using TypeScript. I am trying to implement inline CSS on hover, but despite having written the necessary code, it does not seem to work as intend ...

htmlcssangulartypescript

Exploring the functionality of CSS class selectors (.class-name) when used alongside CSS tag selectors (div, etc...)

I have designed my website with three distinct tables, each requiring unique styling. The general approach I take to apply styling to these tables is as follows: import './gameview.css' <div className="game-results"> <h ...

htmlcssreactjs

Tips for arranging various HTML elements in a horizontally aligned row within a Bootstrap scrollbar

I am encountering challenges with the frontend of my webapp. I utilized Bootstrap along with some customized CSS definitions for adjustments. While the desktop interface appears fine, there is an issue with the navbar on smartphones. When attempting to scr ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code : <!-- Custom Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div> <div class="li ...

css

Issue with autoplay slideshow functionality not activating when opened in a new tab

The owl.carousel.js plugin is used for creating a jQuery slideshow. Initially, the slideshow works correctly, but I noticed that the autoplay feature stops working when I open a new tab in Firefox or Chrome. Demo : Demo : $(document).ready(function () ...

javascriptjqueryhtmlcssowl-carousel

The dropdown feature in Safari fails to collapse when an option is selected

I've encountered an issue with my code using Bootstrap 4 and it's functioning correctly on IE 11 and Firefox, but not on Safari for Mac. The content remains hidden when selecting an option from the dropdown menu in Safari. My intention is to hid ...

javascripthtmlsafaribootstrap-4

Angular is experiencing issues with proper loading of Bootstrap

I used npm install to add bootstrap and jquery, which are now located in the node_modules folder. I then added them to my angular.json file as shown below: "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/s ...

angularbootstrap-4

Is it possible to adjust the background image with properties like Scale to Fill, Aspect Fit, or Aspect Fill?

Is it possible to set the background image using the following properties in HTML? (These are properties used for iOS images, but I am unsure if there are similar ones in HTML): Scale to Fill, Aspect Fit, Aspect Fill https://i.stack.imgur.com/5X83I.jpg ...

htmlcssimage

Using Jinja2/Python, is it possible to alter the parent's style depending on the child's value?

Initially, I found that the :has() combinator accomplishes my desired outcome. In my HTML, I have a table structured like this: <table class="table"> {% for dict_item in data | sort(attribute='name') %} <tr class=" ...

pythonhtmlcssflaskjinja2

presentation banner that doesn't rely on flash technology

Looking to create a dynamic slideshow banner for my website inspired by the design on play.com. This banner will feature 5 different slides that transition automatically after a set time, while also allowing users to manually navigate using numbered button ...

phpjavascripthtmlcssajax

How can I make CSS/HTML tables display inline until they are wider than the parent div?

Is there a way to position two tables next to each other until one table grows wider than the set minimum width, and then have the second table appear below the first, with both tables centered within their parent <div>? This is the current setup: ...

htmlcsshtml-tablecenter

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

javascriptjqueryhtmlcssjson

What's causing all my carousel slides to stack on top of each other instead of presenting in a

Whenever I click 'run' or 'preview' in a browser, specifically using Chrome, all three slides are displayed stacked from 1 to 3 in a static view. They do not toggle through each slide as intended. This issue only occurs on Codeply, a p ...

htmlcsscarouselbootstrap-5

How to make a CSS Grid layout with automatic height that includes a single column containing multiple content blocks?

I've been exploring the website and attempting to implement a similar layout, but I'm facing some challenges in getting it to look how I want. Please refer to the image I've attached for reference. Is there a straightforward CSS-Grid method ...

htmlcsscss-grid

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

htmljquerycssshopifyliquid

Complete layout photography using bootstrap 4

I'm looking to create a banner that adjusts appropriately for mobile and desktop display. Here's what I've tried: When it is displayed in mobile When it is displayed in desktop In my attempt, the text alignment was off even though I used ...

htmlcsstwitter-bootstrapimagebootstrap-4

I wish to have the sidebar shown initially, then be able to collapse it by clicking a button and adding a dropdown feature to the side of the menu items using Bootstrap

I am looking to implement a sidebar menu using Bootstrap. I want the ability to hide the menu, even on larger screens, by clicking a button. When collapsing the menu to the left side, I want the icons to display on the left as well. Clicking on a menu i ...

javascriptjqueryhtmlcsstwitter-bootstrap

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

javascriptjqueryhtmlcss