Bootstrap box grids

I'm attempting to create grids similar to the image provided below

IMAGE LINK:

However, I am experiencing an issue with DIV E being positioned almost right next to DIV D

Below is the code I have so far:

<div class="container">
    <div class="row">
        <div class="col-md-1">
            <div class="col-md-1">A</div><br/>
            <div class="col-md-1">B</div><br/>
            <div class="col-md-1">C</div>
        </div>
        <div class="col-md-11">D<br/>
            <div class="col-md-1">E</div>       
        </div>
    </div>
</div>

I added break lines because DIV A and DIV B were displaying as one continuous element without breaks.

Would it be more appropriate to use a table for this layout?

csstwitter-bootstrapgrid

Answer №1

Avoid unnecessary container and row divs when using Bootstrap 3.*.

Check out the modified code that corresponds to the screenshot provided: http://jsfiddle.net/Sd2zw/. I utilized xs columns due to the limited screen size on jsfiddle, but you can switch back to md as needed:

    <div>
        <div class="col-xs-1">
            <div class="col-xs-12">A</div>
            <div class="col-xs-12">B</div>
            <div class="col-xs-12">C</div>  
            <span class="clearfix"></span>
        </div>
        <div class="col-xs-11">
            <div class="col-xs-12 d-container">D</div>
            <div class="col-xs-12">
                <div class="col-xs-1">E</div>  
                <span class="clearfix"></span>
            </div>    
        </div>
        <span class="clearfix"></span>
    </div>

Don't forget to include clearfix tags to manage float clearing within the layout.

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

Addressing the Summer Note Problem within a Bootstrap Popup

I am currently facing an issue with the functionality of the Summernote Text plugin in my project. The text inside the Summernote editor does not display what I am typing until I resize the browser window. Below is the code snippet for reference: <%-- ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Prevent accidental selection when clicking on empty space on a webpage using CSS

Can anyone help me with a frustrating issue I'm facing on my website? Whenever I click multiple times on empty spaces, it ends up selecting entire rows and paragraphs like in this fiddle. The most confusing part is that there's no text under the ...

htmlcssselecttext

"Delving deep into the realm of CSS3 with

Is there a way to use the CSS3 selector to target an element under a specific class? <div> <span>Example Text</span> </div> I attempted using div:not(span) but it didn't work. (I believe the :not pseudo-class ...

htmlcssclass

The class styling is malfunctioning

When I click the 'night' button, I want the word color in the class=css to change to white. However, this is not working as intended, even though all other word colors are changing correctly. Here is my code: .css { font-weight: bold; ...

javascriptcss

Navigating through parent folder HTML files from child folder HTML files

Seeking guidance as I embark on a new project! Check out this link to see my skills in action: collegewebsite.zip Now for the query at hand. I am working on a project named Coffee Cafe for my tuition assignment. It involves utilizing CSS and HTML with J ...

javascripthtmlcss

Instructions on designing a three-column layout for six separate div elements

i am having trouble organizing 6 div elements into 3 columns per row. Currently, I have them arranged in two rows, but the issue arises when a column's h2 element is long and it pushes down the column below, creating a large space in the second row. A ...

csshtml

Two columns with one column having a fixed width

I am looking to create a layout with two columns, one for content and the other for a sidebox. The sidebox should have a fixed width while the content column can shrink as needed. Eventually, both columns will stack to 100% width, but I want the content c ...

htmlcss

Target the last element of a specified type in CSS without selecting any of its sub

I have a main element with nested children, some of which share a common CSS class. My goal is to select the last child of the main element without selecting the last sub-child as well. I have attempted two methods so far: Using :last-child .some-cl ...

htmlcss

How can I fix the alignment issue with my centered div?

My attempt to vertically align a centered inner DIV is not working as expected... What could be causing this issue? CSS Code: #page_bar { width: 100%; height: 30px; background-color: white } .page_bar { width: 800px; height: 30px; ...

htmlcssvertical-alignmentalignment

Tips for Positioning Content in the Center of a Bootstrap Div

I'm struggling to center the jackpot-item-container div within a chart. Can anyone help me figure this out? Check out my code on CodePen. <div id="jackpot-container" class="col-sm-12"> <div id="jackpot-item-container"> <span id= ...

htmlcsstwitter-bootstrap

Shutting down the Fancybox Window

Included in this code is a button that triggers the opening of a fancybox containing a form. Once the form is filled out and submitted, I want the window to close automatically and be replaced by another window displaying a success message. This success me ...

javascriptjqueryhtmlcssfancybox

Steps for concealing a div element upon clicking on it

Is there a way to create an accordion where all the tabs start off closed, but open when clicked and close when clicked again? I have managed to open one tab, but I am struggling to figure out how to close it and how to make the opening and closing process ...

javascripthtmlcssaccordion

focusing on a specific category within a CSS identifier

My goal is to specifically target the class .page-has-children within this code snippet: <div id="dc_jqverticalmegamenu_widget-2" class="widget sidebarwidget "> <div class="dcjq-vertical-mega-menu" id="dc_jqverticalmegamenu_widget-2-item"> ...

csswordpress

How can I create a CSS grid with two groups of columns, each occupying 50% of the grid?

My goal is to create a CSS grid layout with 6 columns, but I want to divide them into 2 groups of 3 columns each. Each group should take up 50% of the width, and be left-aligned. For example: #parent { width: 100%; display: grid; grid-template-r ...

htmlcsscss-grid

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

I am trying to enhance this image slider in HTML and CSS to achieve the following objectives: 1. Eliminate the scroll bar 2. Implement swipe functionality with mouse flick (should work on mobile devices as well) 3. Make the images clickable .slider{ ove ...

javascripthtmlcss

Use CSS and JavaScript to create a visually appealing and interactive tree structure. Give the tree a dynamic design

I have been experimenting with CSS and JavaScript to create a dynamic graph based on a data table. You can view the graph that I need to replicate using CSS and JavaScript in this PDF. The example provided below showcases what I am attempting to achieve, a ...

javascriptjqueryhtmlcssjson

Ways to effectively incorporate Bootstrap into Lit?

Currently, I am in the process of converting a website from Polymer to Lit. I have made good progress with it, but I have encountered a roadblock when it comes to styling. In order to simplify development and focus on functionality, I have been following t ...

javascriptcssbootstrap-5masonrylit

Ways to determine whether LI contains UL descendants

I am trying to determine if a specific list item (LI) contains an unordered list (UL) inside of it using jQuery. Here is the code structure I am working with: <ul> <li class="static"> <ul class="static"> </ul> ...

jqueryhtmlcss

Expandable sidebar using responsive Twitter Bootstrap

I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...

jquerycsstwitter-bootstrapsidebar

Show validation error messages for radio buttons alongside images in a single row

Within a div, I have placed three radio buttons with images inline. My goal is to show a validation message using bootstrap when the submit button is clicked and there is no user input. I attempted to add another div after the radio buttons with the class ...

htmlcssbootstrap-4