What is the purpose of a wrapper div that contains .col with no specified

Currently, I am utilizing Bootstrap 3 while also attempting to organize my styles in a modular manner like so: (the unneeded <span>s are created by React and I'm unsure how to remove them...)

html

<div class="row">
    <span></span>
    <div class="Module">
        <span></span>
        <div class="col-xs-3">
            <span></span>
            <div class="thumbnail-wrapper">
                <span><img alt="My something" class="img-thumbnail" src="/static/media/avatar.96308863.png"></span>
                <div class="img-thumbnail-close-btn hidden">
                    <span><span class="fa-stack fa-1x"><i class="fa fa-circle fa-stack-2x white-background"></i><i class="fa fa-circle-thin fa-stack-2x black-border"></i><i class="fa fa-times fa-stack-1x"></i></span></span>
                </div>
            </div>
        </div>
    </div>
</div>

Module does not have any height, however col-xs-* and row do.

  • Why is this the case?
  • Additionally, how can I make Module full height?
htmltwitter-bootstrapcsstwitter-bootstrap-3

Answer №1

.Module lacks height due to the floating of .col- classes in Bootstrap 3. When an element is floated, it is removed from the normal document flow and does not occupy space. Consequently, if .col- elements do not occupy space, then .Module will have no height. However, .row does have a height because it includes a built-in clearfix that clears the floats of .col-.

To resolve this issue, you can add overflow: hidden; to .Module for float clearing or utilize a clearfix.

It may also be beneficial to relocate .Module within the .row element based on the styles applied, such as background-color.

Uncleared Floats

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

.Module {
  background-color: gold;
}
<div class="row">
  <div class="Module">

    <div class="col-xs-6">
      Some content here
    </div>

    <div class="col-xs-6">
      Some content here
    </div>
    
  </div>
</div>

Cleared Floats

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

.Module {
  background-color: gold;
  overflow: hidden;
}
<div class="row">
  <div class="Module">

    <div class="col-xs-6">
      Some content here
    </div>

    <div class="col-xs-6">
      Some content here
    </div>
    
  </div>
</div>

Answer №2

simply add clear:both just before the closing tag of the .module div,

<div class="row">
    <div class="Module">
        <div class="col-xs-6">Content goes here</div>

        <div class="col-xs-6">More content here</div>
        <div style="clear:both"></div>
       </div>
</div>

Answer №3

To achieve the objective of "expanding .Module to full height," all parent containers of .Module must also be set to full height.

body, html {
    height: 100%;
}

.container, .row {
    height: 100%;
}

.Module {
    background: gold;
    min-height: 100%;
}

http://www.example.com/code123

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

Identifying mouseover event across numerous elements in JavaScript

I'm attempting to identify the mouseover event on multiple elements using their class as a reference. For instance: <div class="myElement">1</div> <div class="myElement">2</div> <div class="myElement">3</div> & ...

javascripthtml

Using jQuery's .html() method to update the inner HTML of an element can cause the .click() event on a form button to stop functioning

There is a puzzling issue with my HTML form button and jQuery functionality. The button is supposed to trigger a .click() event from a JavaScript file, and it was working perfectly until I used jQuery .html() to replace the main page content with the form ...

javascripthtmljquerybuttononclick

At a certain point, the scrolling iframe within the mobile app suddenly jumps back to the top of the page

Looking for some assistance with my HTML code. Here it is: <header class="bar-title"> <a class="button-prev" onclick="history.back(-1)">back</a> <h1 class="title">Page</h1> </header> <div style="overflow:auto;-we ...

javascriptjqueryhtmlangularjscordova

The CSS rules are not taking effect

Recently, I encountered an issue with my small web project where certain CSS styles stopped being applied out of the blue. Initially, these styles were working perfectly fine when applied through a class in HTML. However, upon further investigation, I no ...

htmlcss

What causes jQuery's .width() method to switch from returning the CSS-set percentage to the pixel width after a window resize?

After exhaustively console logging my code, I have finally identified the issue: I am attempting to determine the pixel width of some nested divs, and everywhere I look suggests that jQuery's .width() method should solve the problem. The complication ...

javascriptjqueryhtmlcss

Unveiling the secrets to isolating elements from a list based on distinct characteristics

Currently, I am attempting to scrape job skills from the Wuzzuf website using the following code snippet: result = requests.get("https://wuzzuf.net/search/jobs/?q=data+analysis&a=navbl") src = result.content soup = BeautifulSoup(src, "lx ...

htmlcsspython-3.xweb-scraping

JavaScript code that moves the active link to the top of the navigation when the window width is less than or equal to 800px

I'm working on a responsive navigation that is fixed at the top and switches from horizontal to vertical when the screen size is less than or equal to 800 pixels wide. However, I'm facing an issue with moving the active link to the top of the na ...

javascripthtmlcssnavigationresponsive

Optimizing images for typography in SEO

Dealing with font rendering issues across different platforms can be quite challenging (for example, Windows often has unsightly anti-aliasing, and TTF fonts are not anti-aliased at all). This led me to consider generating a separate PNG file for each head ...

htmlseo

What is the best way to eliminate the left margin entirely in CSS?

I am attempting to create an image view that fully covers the window, without any margins. I have tried various solutions such as setting the body margin and padding to 0, but they do not seem to work. body { margin: 0px; padding: 0px; } or *, html { ...

htmlcssangulartypescript

Creating a Select Directory feature with React - A Step-by-Step Guide

I am in need of uploading all files from a folder to the server. I have been attempting to use a Select Directory window instead of selecting individual files. The standard method: <input type="file" webkitdirectory directory/> has not worked for ...

htmlreactjsfolderbrowserdialog

Animate a list to expand and collapse the menu options

Here's the concept I'm aiming to achieve: When "PORTFOLIO" is clicked, smoothly push down everything on the page; New links should fade in smoothly; If "PORTFOLIO" is clicked again, reverse all animations. This is my current code snippet: $( ...

javascriptjqueryhtmlcss

What is the best way to include interactive text on an image?

Just starting to learn html and could use some quick guidance. I have this image here: https://i.sstatic.net/kBJEk.png I would like to place clickable text on the image that links to different pages when clicked, similar to this example: https://i.sstatic ...

htmlcss

Turn off the feature that highlights links

Hi there! I'm curious to know if it's feasible to remove the highlighting effect when clicking on a link. I'd like the link to function more like an image, without the appearance of a highlighting box upon clicking. ...

javascripthtmlcss

Tips for eliminating extra blank space under the footer on an HTML website

Just beginning my journey with bootstrap and I am encountering an issue on my website where there is space after the footer when resizing to a mobile size. I've tried setting margin: 0; padding: 0; but it hasn't resolved the problem. Here's ...

htmlcsstwitter-bootstrap

Adjacent buttons

I am trying to place two buttons side by side, but they keep appearing stacked on top of each other. Can anyone help me figure out how to solve this? Here's the code: Styling (CSS): <style type="text/css"> .button_example{ border:1px solid #B ...

htmlcss

Allow users to download content from my ASP page using HTML

Is there a way to allow clients to download the HTML contents of a page after receiving a post request (XMLHttpRequest) and doing some processing? I've tried enabling CORS by adding the following code: Response.AddHeader("Access-Control-Allow-Origin" ...

c#htmlasp.netcross-domain

The issue of the cursor not showing up in Chrome within a nested contenteditable structure arises when applying CSS after the

Currently, I am coding a HTML document that includes an element with the attribute contenteditable set to true, but this element is wrapped inside a parent element with contenteditable set to false. The HTML structure looks like this: <div contentedita ...

javascriptjqueryhtmlcssgoogle-chrome

Multiple Ajax(Jquery method) Submissions with just one click and issue with Image not being sent to the server

Having trouble submitting form data to the server after client-side validation using jQuery. I've been working on this all day and could really use some help. I created a jQuery slider for my login form, where it slides to the next input field after v ...

phpjqueryhtmlajax

Transmit form data via Ajax request

Thank you for your interest. I am looking to retrieve $_POST['Division'] from a dropdown list: <select name="Division" onchange="setImage2(this);"> <option value="1">Bronze</option> <option value="2">Silver</op ...

javascriptphpjqueryhtmlajax

Displaying images on hover that were not initially incorporated into the project

I am currently developing a website where the content is not controlled by me and the incoming content is unknown, making it impossible for me to store images. My goal is to display the referenced image when a specific class is hovered over. For example: ...

jqueryhtmlimageonhover