Tips for arranging elements in a flex row using Bootstrap

Is there a way to create a photo-style layout using flexbox?

see image link here

<div class="row">
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>

Answer №1

One effective method to achieve this is through the use of grid. Below is an example demonstrating how it can be implemented:

.row {
  display: grid;
  grid-template-areas: "a b c" "d d c" "e f c";
  grid-gap: 5px;
}

div {
  border: 1px solid black;
  padding: 5px;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}
<div class="row">
  <div class="col-md-6 a">a</div>
  <div class="col-md-3 b">b</div>
  <div class="col-md-3 c">c</div>
  <div class="col-md-6 d">d</div>
  <div class="col-md-3 e">e</div>
  <div class="col-md-3 f">f</div>
</div>

Answer №2

Sample HTML and CSS Code:

<div class="main-div">
    <div class="leftside">
        <div class="leftside-1">
            <div class="leftside-1a">1a</div>
            <div class="leftside-2a">2a</div>
        </div>
        <div class="leftside-2">2</div>
        <div class="leftside-3">
            <div class="leftside-1c">1c</div>
            <div class="leftside-2c">2c</div>
        </div>
    </div>
    <div class="rightside">
    </div>
</div>

CSS Styles:

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

.main-div {
  width: 100vw;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/* More CSS styling rules here */

Answer №3

* {
  box-sizing: border-box;
}

.row {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 200px);
  grid-gap: 10px;
  width: max-content;
  margin: auto;
}

.col {
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.col:nth-child(3) {
  background-color: blue;
  grid-column: 3 / 5;
  grid-row: 1 / 4;
}

.col:nth-child(4) {
  grid-column: 1 / 3;
}
<div class="row">
  <div class="col col-md-3">col3</div>
  <div class="col col-md-3">col3</div>
  <div class="col col-md-6">col6</div>
  <div class="col col-md-6">col6</div>
  <div class="col col-md-3">col3</div>
  <div class="col col-md-3">col3</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

Tips for Keeping a Responsive Image at the Forefront of a Text-Image Layout as You Scroll

I'm currently in the process of creating a website where text appears on the left side with an accompanying image on the right. The challenge I'm encountering is ensuring that as users scroll, the image adjusts dynamically based on the associated ...

Double-up with Bootstrap's dual-column tabs

Looking to customize the layout of a nav-tabs ul to display its contents in 2 columns instead of horizontally, as per the default Bootstrap style for nav-tabs. Attempted to use the CSS property column-count: 2 but it didn't yield the desired result. ...

css effect of background image transitioning on mouse hover

Is there a way to have an element on my webpage with a background image that follows the movement of the mouse when hovered over? I want it to be similar to this website: This is the HTML code I currently have: <section id="home" data-speed="3" data-t ...

Error with infiniteCarousel in Internet Explorer versions 7 and 8 when using jQuery

Hello everyone! I've run into a little issue with some jQuery code I'm using. It was working fine before, but after making several changes and improvements, I can't seem to figure out what the problem is. I keep getting JS errors in both IE7 ...

Deactivate input areas while choosing an option from a dropdown menu in HTML

I've been working on creating a form and have everything set up so far. However, I'm looking to disable certain fields when selecting an option from a dropdown list. For instance, if the "within company" option is selected for my transaction typ ...

Tips for centering an image vertically in a table's cell

I'm looking to vertically center the text, but I'm not sure how to do it. Check out my attempt on the fiddle link below: http://jsfiddle.net/jTW4d/ ...

Tips to position two shortcode elements next to each other horizontally

I have some code here and I am looking to align the two elements at the bottom, "php echo do_shortcode(wcas-search-form);" and "php do_action('hamzahshop_custom_min_cart');" on the same line horizontally. I am new to this and struggling to figure ...

Error encountered when assigning a value to a session array in PHP 7.0

I am the author of this script <?php session_start(); if($_POST["num"] > $_SESSION["ratings"][$_POST["title"]]) $SESSION["ratings"][$_POST["title"]] = $_POST["num"]; ?> Although my syntax seems correct to me, the IDE is showin ...

How can I update the color of a list item when it is clicked within a foreach loop using knockout js?

Currently, I am encountering an issue with changing the color when a user clicks on a list item using the latest version of knockout js. My goal is to change the color of a list item when it is clicked and maintain that color until another item is clicked, ...

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...

What is the best way to update the text within a Span element as the user moves through the Jquery slider?

Can I utilize jQquery to dynamically alter the text content of my "video_box_label" span element based on the active slide in my "flexslider" slideshow? For instance, when the slideshow transitions to the second slide, I want the text to change from "Mee ...

HTML Inclusion Tool (Nested Include Feature)

My web development project is getting bigger and my HTML files are starting to become unwieldy. I have created an array to organize all the includes needed for the app: $html_includes = [ 'menu', 'tools', 'canvas', &a ...

What is the best way to include a swf video in a list of hyperlinks?

My current code displays an image inside a box, and I am looking to replace the image with either a swf video or .AVI video. I have the object video code to play a swf video, but I need the video to be played within the box where the image is currently l ...

Utilizing AJAX to retrieve data from a MySQL database upon clicking a button

Hello everyone, I am fairly new to the world of PHP and AJAX, so please bear with me. I am currently attempting to retrieve MySQL results using AJAX. I have made some progress thanks to the information I have gathered from various sources on the internet. ...

Unique Pie Chart Designs

As I attempt to create a dynamic arc-shaped pie graph using CSS, representing 100% of the data, I find myself facing challenges. Despite extensive research and Google searches, I have yet to come across a suitable solution. The following reference appears ...

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...

Should CSS properties be applied directly to the html tag?

Surprisingly, I recently discovered that it's possible to set the background-color of the html tag. It seems strange since I always thought the body was responsible for containing the first rendered tag. I used to believe that the html tag was just a ...

The sidebar stays fixed in place and doesn't adapt to varying screen resolutions

Check out my website at . I have a fixed, blue sidebar on the left side of the page to ensure its content is always visible. However, I'm facing an issue with smaller resolutions like 1024x768 where some bottom content is cut off. How can I adjust the ...

Placing numbers at the top of the HTML table cell for better visibility

I am currently utilizing a two-column HTML table to showcase a list of rules. In one column, I have the rule's number, while in the other, I have the rule itself. However, I've noticed that the rule numbers are appearing near the bottom of their ...

Setting up global color variables for React with Material UI theming is essential for ensuring consistent and

Is there a way to customize the default material-ui theme using global CSS? Additionally, how can we incorporate HEX values for colors when setting primary and secondary colors in the theme? In my App.js root file, I have defined a custom theme and want t ...