An unconventional layout of columns in Twitter's Bootstrap design

I've encountered an issue and I'm currently struggling to find a suitable solution. My goal is to achieve the following layout (for screen sizes greater than or equal to medium):

Within black boxes, there will be images displayed. The white space represents the user's viewport. I aim for those two horizontal boxes to perfectly align with the edges of the screen.

<link href="http://cdn.jsdelivr.net/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=1" alt="" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=2" alt="" />
    </div>
    
    <div class="clearfix visible-sm-block"></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <!-- Ensure it spans to the right edge of the screen on resolutions >= medium -->
      <img class="img-responsive" src="http://placehold.it/1920x300&text=3" alt="" />
    </div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <!-- Ensure it spans to the left edge of the screen on resolutions >= medium -->
      <img class="img-responsive" src="http://placehold.it/1920x300&text=4" alt="" />
    </div>
    
    <div class="clearfix visible-sm-block"></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=5" alt="" />
    </div>
    <div class="hidden-xs col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=6" alt="" />
    </div>
    
    <div class="clearfix visible-sm-block"></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=7" alt="" />
    </div>
    <div class="hidden-xs hidden-sm col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=8" alt="" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <img class="img-responsive" src="http://placehold.it/1920x300&text=9" alt="" />
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-xs-12">Additional content within the container class. The total width of these three images should match this container for a seamless fit.</div>
  </div>
</div>

This layout provides a basic grid structure showing the elements that should be visible based on the user's screen size.

Any assistance in achieving this would be greatly appreciated.

By the way: It is necessary for this to be contained within the container as there will be surrounding content that needs to remain visually aligned and consistent.

Answer №1

Here is a solution that might be helpful for your needs

<div class="wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>

<div class="wrapper">
  <div class="box-4"></div>
  <div class="box-5"></div>
  <div class="box-6"></div>
</div>

<div class="wrapper">
  <div class="box-7"></div>
  <div class="box-8"></div>
  <div class="box-9"></div>
</div>

Answer №2

To achieve spacing between columns, you can utilize the col-md-offset-x class. For instance, here's an example of a row with a gap at the beginning:

<div class="col-md-2 col-md-offset-2">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-4">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>
<div class="col-md-2">
  <img class="img-responsive" src="http://placehold.it/1920x300/" alt="" />
</div>

It's important to note that in the grid created above, there are 5 'places'. This deviates from the standard bootstrap grid system which is divided into 12 'places' (12 modulo 5 = 2).

Answer №3

From what I know, achieving this requires nesting and column offsets. Additionally, you need to utilize container-fluid if you aim to occupy the entire screen width. Use grid columns to restrict the width of the 3rd row. Essentially, you are converting the 12 column grid into a 10 column grid.

http://example.com/go/abc123

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-11 col-md-offset-2">
                <div class="row">
                    <div class="col-md-3">

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

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

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

    <div class="col-md-12">
        <div class="row">
            <div class="col-md-11 col-md-offset-2">
                <div class="row">
                    <div class="col-md-3 col-md-push-3">

                    </div>
                    <div class="col-md-3 col-md-push-3">

                    </div>
                    <div class="col-md-6 col-md-pull-9">

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

    <div class="col-md-11 col-md-offset-2">
        <div class="row">
            <div class="col-md-3">

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

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

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

Answer №4

Hello! You have the option to utilize a customized column setup as shown below:

<style>
    .col-md-offset-sp  { margin-left:20% }
    @media (min-width:992px) { .col-md-sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 20%; }}
    @media (min-width:992px) { .col-md-2sp { position:relative;min-height:1px;padding-right:15px;padding-left:15px;float:left; width: 40%; }}
</style>

<div class="container">
    <div class="row">
        <div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>

        <div class="col-md-2sp"><img src="http://placehold.it/500x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>

        <div class="col-md-sp col-md-offset-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
        <div class="col-md-sp"><img src="http://placehold.it/250x150" /></div>
    </div>
</div>

The classes col-md-sp and col-md-2sp are designed for a 5-column layout with widths of 20% and 40%, respectively. The col-md-offset-sp class manages the margin for this particular layout (margin-left set to 20%).

Important note: The other rules specified are directly sourced from the bootstrap.css file.

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

"Create a variety of graphical displays using Flot, incorporating HTML, PHP, and executing MySQL queries

I’m currently facing a challenge with drawing multiple Flot charts using html, PHP, and MySQL query. I'm having difficulty figuring out how to draw multiple Flots on the same HTML page. In the database (test_db3) image for simplicity, there are two ...

Scrolling an HTML element to a specific value within its content

Code: /* -------------------------------------NAV & BANNER------------------------ */ #logo{ height: 60px; width: 60px; } .nav-color{ transition: 0.5s; background-color: rgba(0, 0, 0, 0.75); } .nav-null-color{ transition: 0.5s; } .banner{ ...

showing additional attribute values when one is available in a Django template

I am currently working on developing an app using Django, and this snippet represents the index.html page: <html> <head> <title>Welcome to the Index Page</title> </head> <body> <h1>Select a Student Nam ...

Post the HTML5 player on your Facebook feed

Currently, I have a player that exists in both Flash and HTML5 versions. When calling a page through an iframe, the browser and device are detected automatically to load the player accordingly, and this setup is functioning correctly. Prior to implementin ...

Item securely positioned below a specific threshold

Welcome to my first post here! I've received so much valuable help from this forum and the posts of other users. However, there's one question that I can't seem to find an answer for. Here it is: I have a button that, when pressed, smoothly ...

CSS background: seeking a fresh background for the rest of my pages

When I use CSS background: url(stuffhere.jpeg) for the background, it remains unchanged when clicking on other videos categorized as "projects," not pages. I have attempted using <body id="home"> and <body id="projects">, creating two backgrou ...

Eliminate the gutter margin between columns in Bootstrap 4

Recently, while working on an Angular project with Bootstrap 4, I came across a unique issue. It seems that the framework automatically adds some left margin when using the .col class. Despite trying to remove this margin, even the inspector is showing it ...

Create a single button that controls checkboxes with the help of HTML, CSS, SCSS, and Bootstrap 4

Is there a way to use only HTML, CSS, SCSS, and Bootstrap 4 to make all checkboxes default to the "on" condition when a button is clicked? Typically, this functionality would be achieved with JavaScript, but due to constraints, I am exploring alternative ...

The page remains static even after choosing an item from the dropdown menu in Selenium

Currently, I am encountering an issue while attempting to automate a Python process that involves filling out a webpage and choosing values from dropdown menus. Despite selecting the desired dropdown value, the page fails to update accordingly. The follow ...

TemplateUrl malfunctioning

While experimenting with basic Angular code, I encountered an issue where everything was functioning correctly when using template, but not when switching to templateUrl. I did not provide the previous code as it was working fine except for this specific c ...

Use Python to fetch a file from a webpage without having to actually open the webpage

I needed a method to automate the download of a file from a particular website without having to manually open the website. Everything should be done in the background. The website in question is Morningstar, and a specific example link is: . On this page ...

Link that is clickable within the tooltip of a Highcharts graph

My tooltips contain a list of data, and I want each data point to be a clickable link that redirects to the page for that specific data. The issue arises with Highcharts tooltip because it changes based on the x-axis, resulting in the tooltip content chang ...

Problematic rendering of Bootstrap Navbar Toggle

As I work on creating a WordPress theme using Bootstrap 3, I encountered an issue with the navbar toggle when reducing the screen width for testing. The image displayed doesn't align with what I expected. While I suspect it might be a WordPress-relate ...

When the <body onload="function()"> event is triggered, my animated image freezes in

I am working on a preload page that includes an animation. <body onload="showSpinner()"> <h3>Please Wait...</h3> <script> function showSpinner() { showProgress(); window.loc ...

Tips for determining the full width of a webpage, not solely the width of the window

While we can easily determine the width of the window using $(window).width(); This only gives us the width of the window itself, not accounting for any overflowing content. When I refer to overflowing, I mean elements that extend beyond the visible view ...

Switch up the Slide-In Animation for Desktop Navigation in Bootstrap 4

I want to create a toggle button in the desktop version of Bootstrap 4 navigation that can expand and collapse the menu items. For example, the menu button will minimize the menu items to the left side of the screen when clicked. [Menu] [Menu] Link Link ...

Browsing through files on IE8 within one window

I recently encountered an issue that I have never experienced before. Typically, when browsing through my folders in Internet Explorer, everything worked smoothly for me. If I included various directory links, I could easily navigate back and forth to expl ...

Tips for unchecking a checkbox when another checkbox is checked in Angular

My table displays a list of deleted items. Users have the option to either recover the item or delete it permanently. I am seeking assistance in ensuring that only one checkbox is checked in a table row, and unchecking other checkboxes if the user tries t ...

Setting the color for the :hover and :active states on a react JSX component: A step-by-step guide

<button onClick={fetchExchangeRates} style={{ backgroundColor: `${selectedColor}` }} className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md" > Convert <FontAwesomeIcon className=&apo ...

I am looking to extract the content of the title within an HTML table

Check out my code snippet below: <td class="text-left"><div class="ettn" data-toggle="tooltip" title="7f5e5b03-7d30-4001-acd9-c993d6c24301">ETTN</div></td> I am looking to extract the value ...