Is there a way to create 3 divs in the first row and 2 divs in the second row?

How do I create 3 divs in the first row and 2 divs in the second row?

This is what it currently looks like:

This is the desired output: 

<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="gift-div">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-6 col-padds">
      <a href="giftred_detail.php?p=">
        <div class="div-size" style="background-color:transparent ; border : 3px solid white; box-shadow: 0px 0px 70px 5px #FF0000, inset 0px 0px 150px 5px #FF0000;;">
          <img src="img/gift/" alt="Item" class="jpo">
      </a>
      <div class="container text-con" style="text-align:center">
        <h4><b style="word-break:break-word"></b></h4>
        <p>Points</p>
      </div>
      </div>

    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

Another option is to utilize CSS flex:

.boxes {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 200px;
  gap: 50px;
  flex-direction: row;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
<div class="boxes">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

PLEASE NOTE: IFRAME WIDTH MAY AFFECT THE ACCURACY OF THE RESULTS DISPLAYED HERE.

View the actual results here:

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

Check out this Fiddle example

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

Incorporate a time selector into a Bootstrap 4 input form

Can anyone help me figure out how to incorporate a timepicker into an input field on a Bootstrap 4 admin template? Previously, I had integrated a jQuery timepicker successfully, but after switching to the new Bootstrap 4 admin template, it stopped working ...

bootstrap-4timepicker

Positioning and resizing elements based on varying screen sizes and levels of zoom

I recently designed a basic webpage using HTML with two main elements - a chat window for user interaction and a chart.js plot. Here is a snippet of the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

htmlcss

Leverage object properties as data table field values in VueJS

In my current project, I am utilizing VueJS (version 2.5.9) to display and modify data tables within an administrative application. Initially, I used a basic Grid component for the data table, following an example provided here. However, I came across an e ...

javascripthtmlvue.jsvuejs2vue-data-tables

Is it possible to manipulate divs with CSS media queries for positioning?

I currently have a footer displayed on the desktop version of my website, which appears like this: https://i.sstatic.net/ZMUZj.png However, for tablets (with a width less than or equal to 960px), I need to adjust the layout using media queries to look li ...

htmlcssreactjsmedia-queries

Steps for adding an overlaying image in HTML and SCSS

First step: background-size: cover; Second step: background-size: contain; background-repeat: no-repeat; The third step is what I need: the first background image to be set as cover and the second one as an overlay with no-repeat Currently, my HTML incl ...

htmlcsssass

How can I shift an element without adjusting the padding to prevent border or margin collapse?

Is there a way to move HTML elements without the use of padding, as I need a border for color and want to avoid collapsing with other elements in the structure? Or is this the only option and should I just avoid colliding with other elements? "Margin is t ...

html

Creating flexible padding for child elements inside a container using CSS

I am facing a challenge in creating dynamic padding within a container. Consider the following HTML: <div class="sections-container"> <div class="section"> </div> <div class="section"> </div> </div> and the corres ...

javascripthtmlcssstyling

"Troubleshoot: jQuery UI accordion not functioning properly in response to

I've encountered an issue with the accordion functionality while working with dynamic data. To address this, I'm incorporating JavaScript to generate <div> and <h3> tags for the accordion. Here is the code snippet I am using: $(&ap ...

javascriptjqueryhtml

Capturing an image of an HTML5 canvas that includes an image object: tips and tricks

After creating a canvas and adding various objects like images, clipart, and text to it, I encountered an issue. When capturing a snapshot of the canvas with only text using the method `canvas.toDataURL()`, the snap is correct. However, when I include an i ...

javascripthtmljsonhtml5-canvasfabricjs

Tips for modifying the appearance of this input document

Hey there, I have this input element created in React: <span className="btn-file" type='button'> <div style={{display:'flex',justifyContent:'space-around'}}> <span style ...

htmlcssreactjs

Guide on validating an input field of type=date by checking for empty input or if it doesn't match a specified regex pattern, and showing corresponding error messages

I've spent days attempting to create a function that validates whether the input type=Date is both filled out and formatted correctly. The criteria I'm looking for are as follows: If the field is left empty, show an error message: "* is require ...

javascripthtmlforms

Delivering seamless css integration using express.js

Lately, I've been struggling with serving CSS using Express.js. After some trial and error, I managed to make it work. However, I'm puzzled as to why my new code works while the old one doesn't. Here's the code that now works for me: co ...

javascriptcssexpresspath

Dealing with CSS overflow issues in Safari, Chrome, and the ancient IE 6

Are Safari and Chrome compatible with overflow? How does IE 6 or higher handle overflow? ...

css

Generate an animated sequence transitioning smoothly from the left side to the center

I am in need of creating an animation that will cause a menu to appear from the left side of the screen when a button is clicked. The menu should expand to cover 55% of the width of the main page. You can view a demo of this animation on JSFiddle by follo ...

javascriptjqueryhtmlcss

Generate PHP web pages automatically

I'm seeking assistance on automating the creation of individual PHP pages. Currently, I have a page called catalog.php set up. Within catalog.php, there is an SQL query that connects to the database and retrieves specific information: $link = mysql ...

phpmysqlhtmlcss

What is the best way to send an array element to a function?

In my PHP code, I am fetching data from a database and encoding it in JSON to be called by an AJAX request. while ($row = mysqli_fetch_assoc($empRecords)) { $data[] = array( "level"=>$whatTeam($row['level&a ...

phphtml

The Bootstrap dropdown menu experiences a flickering issue when the user quickly hovers over it

I currently have a bootstrap menu implemented on my website. When the user hovers over any item in the navbar, a dropdown is displayed, and within that dropdown, there are sub-items as well: https://i.sstatic.net/6XdgR.png As shown in the image. <l ...

javascripthtmljquerycssbootstrap-4

Height of list items in image gallery does not automatically readjust

I'm facing an issue regarding the height of an li element. Check out this CodePen link for reference. <div class="row fp-gallery"> <ul class="large-block-grid-4 medium-block-grid-4 small-block-grid-2"> <li> <a href= ...

jqueryhtmlcsszurb-foundation

The centering of content is not flawless using Bootstrap

Below is a snippet of my code: <div class="container branduri justify-content-center"> <div class="row justify-content-center"> <div class="col-xl-4"> <h1><strong>+100</strong></h1> </div> < ...

htmlcssbootstrap-4

Is it necessary to create a separate class for a frequently used CSS style?

When I find myself needing a specific style frequently, like float: left, is it more efficient to create a separate class for it or include the style directly in each class where it is required? Check out this example page for clarification. JS-Fiddle Ex ...

htmlcss