additional space within bootstrap columns

I'm looking to eliminate the empty space above the 4th span and replace it with the next span. Edit: Without adding a new row.

Here's the fiddle: http://jsfiddle.net/Dzh5E/7/

<div class="main-app">
    <div class="row-fluid">
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
        <div class="span6 lg-height"></div>
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
     </div>
</div>

.md-height {
    height: 300px;
    background: red;
}
.lg-height {
    height: 600px;
    background: blue;
}
.main-app {
    margin-left: 13%;
    margin-right: 13%;
}

Answer №1

For optimal layout, it is recommended to insert a new .row-fluid after every 12 columns.

<div class="main-app">
    <div class="row-fluid">
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span6 lg-hieght"></div>
    </div>
    <div class="row-fluid">
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
        <div class="span3 md-hieght"></div>
    </div>
</div>

http://jsfiddle.net/Dzh5E/9/embedded/result/

Answer №2

The key is to organize the html content into a dual-column layout. One column is for the shorter items where you want to minimize spacing, while the other column is for the taller item.

Adjust the margins according to your preferences (or as mentioned in the question's comments). For a more organized approach, consider using more descriptive class names. You can refer to this example for a visual representation.

HTML

<div class="main-app row-fluid">
    <div class="span9 short">
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
        <div class="span3 md-height"></div>
    </div>
    <div class="span3 tall">
         <div class="span6 lg-height"></div>
    </div>
</div>

CSS

.short .span3 {
    /*Adjust margins: remove left margin and add bottom and right margins*/
    margin: 0 20px 20px 0;
}

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

Manipulate DIV elements with jQuery by selecting them based on their class names and then

Is there a way to use jQuery to eliminate all DIVs on a webpage while preserving their content that have the following specific pattern? <div class="ExternalClass85AC900AB26A481DBDC8ADAE7A02F039">....</div> Please note that these DIVs adhere ...

What is the code in CodeIgniter to retrieve the string 'Sugar & Jaggery, Salt' using <a>?

Can someone please help me? I am a beginner in CodeIgniter and I am having trouble passing a URL with a string. The controller is not accepting the string as expected. How can I fix this issue? //Below is the HTML code for passing a string value index.ph ...

The href appending function will succeed in Ajax if the inArray method is used effectively

Once upon a time, I thought I had nailed it with my ajax login, but alas, I was mistaken. The ajax login feature was working like a charm, perfectly appending the username to a link. Everything was going smoothly until I wanted to implement a page refres ...

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

I'm struggling with CSS styles and properties. I want the text to wrap to the next line instead of overflowing off the browser screen. I've illustrated what's currently happening versus what I actually need. https://i.stack.imgur.com/mPGt8 ...

What is the process for closing the side menu by clicking on the dark area?

I created a basic side navigation menu. When you resize the window to a smaller size, a red square will appear. If you click on this red square, the menu will open. The menu opens correctly, but I want it to close when I click on the dark area instead of ...

The separator falls short of spanning the entire width of the page

For some reason, I can't seem to make the divider extend to the full length of the page. <TableRow> <TableCell className={classes.tableCell} colSpan={6}> <Box display="grid" gridTemplateColumn ...

Struggling to have PHP process and store form data in MySQL database

I am attempting to process HTML form data into a MySQL database using PHP for the first time, and I am feeling overwhelmed. The form is POSTed to the formSubmit.php file, where the variables are created for the SQL command to query. I have tried adjusting ...

Guide to generating a graph using PHP and quickcharts

I am working with a dataset that looks like this: Timestamp Value Importance 5/22/2022 4:19 3245 0.0234 5/22/2022 4:09 3246 0.0214 5/22/2022 4:09 3247 0.1234 5/22/2022 3:59 3248 0.0534 5/22/2022 3:59 3249 0.1234 5/22/2022 3:49 ...

How can I use jQuery to pre-select an option in two connected dropdown lists that are populated with JSON data?

I am currently dealing with two interconnected dropdown lists for country and city selection. The options are populated using JSON data, but I've encountered a couple of issues along the way. The first issue is: How can I set the default selected opti ...

Saving user input from a PHP form into a text file

Below is a simple PHP form that performs a calculation when submitted. Now, I want to save the inputs (height, weight) and calculation result to a text file without displaying the path of the file. Ideally, I would like each submission to add a new line in ...

Is there a way to restrict my input to only 10 numbers without allowing any characters?

Is there a way to restrict the phone number input to only allow 10 numbers and exclude any other characters? Currently, setting the maxLength attribute limits the characters to 10 but allows additional characters as well. If I change the type attribute to ...

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected. Check ...

linking to a page that shows the user's chosen option from a dropdown menu

One of the challenges I encountered was creating a feature that allows users to share a specific selection from multiple dropdown lists on a page. Essentially, my goal was to enable users to send a link that would direct others to the same page with the ex ...

Exploring ways to maximize the width of responsive images on a webpage

I am currently working on a website located at . The slider image dimensions are set to 800x400, but the height appears too large. I need assistance in making the slider images responsive while maintaining their full width without sacrificing height. Ple ...

I want to create a Bootstrap 4 card deck that includes expand/collapse functionality for its content. The expanded content should only impact the current

I am experiencing an issue with my card decks and expand/collapse functionality. Currently, when I expand one card in the deck, all the other cards in the row also expand, leaving a large blank area. This becomes problematic especially when the content is ...

Hiding the author, category, and date information from displaying on WordPress posts

After creating a Wordpress blog site and adding the category widget to the right sidebar as a drop down, I realized that I needed to customize its layout in terms of colors and design. However, I am struggling to find out how it can be done, which .php fil ...

Eliminate the focus border in React-Select

I've been struggling to remove the border or outline (not really sure which one it is) from React Select when it's focused. Here is an image for reference. As you can see, I currently have no default border: https://i.stack.imgur.com/IubaN.png ...

The CSS opacity property fails to function properly on Google Chrome

While it is functioning correctly on Firefox, there seems to be an issue with Chrome. I am attempting to have a card apply the opacity property when hovered over. Here is the HTML file: <div class="col mb-4"> <a class="text ...

Managing the height of a TextArea within a Flexbox environment

After exploring various methods for achieving auto-height in a textarea, I decided to go with the contenteditable approach as it seemed cleaner to me. However, while it worked perfectly on its own, it failed when placed within flexbox containers. I experi ...

The XPath for pagination is incorrect

Whenever I try to navigate to the next page, I keep encountering an error from the robot. Can someone help me construct the xpath using either of these snippets: <li title="2" class="ant-pagination-item ant-pagination-item-2" tabind ...