The height of a Bootstrap container is constantly set to zero

Struggling to get my container code to center an image properly. Despite my efforts, the Container keeps showing a height of 0.

#test {
    background-image: url('https://via.placeholder.com/150');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}


<div class="container">
    <div class="row">
        <div class="col">
            <div id="test">

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

What's causing the container to have zero height and preventing my image from displaying correctly?

htmlcss

Answer №1

Typically, block elements derive their heights from the content enclosed within their tags in the HTML. Content refers to the information between the opening and closing tags of the element. A background image doesn't count as content, but rather serves as a form of decoration.

If desired, you have the ability to set the height manually using CSS to your preference. However, remember that using an empty element can result in unsemantic code.

Answer №2

To address this issue, one solution is to include a height property, as you suggested in the comments.

Another approach to resolve the challenge of different image sizes is by embedding an img tag within the #test element.

<div id="test" style="background-image: url(/my-image.jpg);">
 <img src="/my-image.jpg" style="visibility: hidden;" />
</div>

By doing this, the div will adjust its height based on the dimensions of the image.

Answer №3

<div class="text-center d-flex" style="height: 100vh">
    <div class="container m-auto">
        <div class="row">
            <div class="col-8 mx-auto">
                <h1> YOU'RE CAPABLE OF ACHIEVING IT </h1>
            </div>
            <div class="col-8 mx-auto">
                <h1> I Deserve to be Perfectly Aligned </h1>
            </div>
        </div>
    </div>
</div>

Utilizing margin:auto for vertical alignment of a div

According to the second response in the referenced stackoverflow thread, the issue was due to my parent element not being a flex type.

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

What is the best way to increase the space between table columns in CSS?

I'm struggling to increase the space between the columns in a simple table with two columns. The column-gap property doesn't seem to be working for me. Any suggestions on how I can achieve this? JSFiddle #t td { -webkit-column-g ...

htmlcsscss-tables

Is it possible to apply a background color outside of a radius border within a tbody in Chrome?

When styling my table, I encountered an issue with the background color of the tbody and the white space between the border and the table. Here is a snippet of my HTML and CSS: HTML: <table> <tbody> <tr><td>test</td ...

google-chromebackground-colorcss

Changes in menu layout in response to window resizing

The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...

javascriptjqueryhtmlcss

Integrating an HTML resume, complete with its CSS style sheet, into a different HTML page

Looking for tips on seamlessly integrating one HTML page within another? I'm in the process of customizing my personal website using a template, but I recently came across a free resume HTML code that I'd like to incorporate. However, when I atte ...

csshtml

dividing a solitary string (plain text only, no HTML) evenly among three separate div containers

Recently, I encountered a frustrating dilemma. I'm trying to split a string between three divs, but they are not equal in height, so I can't divide the string based on character count. To illustrate the issue, I've created a small sketch. ...

javascriptphpjqueryhtmlcss

Activate JavaScript functions by pressing the enter key, allowing for various searches, AJAX requests, and DataTable displays to occur seamlessly without the need to refresh

I recently developed a web page that integrates an AWS API interface to interact with an RDS Aurora MySQL Serverless database. Users can input a SQL statement and click the Query button, which triggers an AJAX request, returns JSON data, and converts the d ...

javascriptjqueryhtmlajaxdatatables

JavaScript functions smoothly on Google Chrome but is restricted on Internet Explorer

Experimenting with the code found on this website to conduct some testing. The javascript functions smoothly in Google Chrome and Firefox, but encounters issues in IE. Interestingly, when I run the html file in IE locally, it does work, but a warning pops ...

javascripthtmlinternet-explorerwebsocket

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers

The elements within the divs cannot be aligned next to each other

Having a bit of trouble positioning two div's side by side. Divs are usually block elements, but this time I'm facing some challenges in getting them to sit next to each other. Here's the HTML code: <div class="contact"> <div ...

htmlcssposition

Once the query is executed, the table should display 2 records, however, my PHP code is only fetching and displaying 1 record

Upon execution, the program runs successfully but encounters an issue with the table output. The goal is to retrieve data from a database using a search function. https://i.sstatic.net/6WKlH.png Here is the outline: this represents //account-settings-se ...

phphtmlajax

Disabling the ability to edit the rightmost portion of an input number field

I am looking for something similar to this: https://i.stack.imgur.com/ZMoNf.jpg In this case, the % sign will be shown in the input field by default and cannot be changed or removed. The user is only able to modify the number to the left of the % sign. P ...

javascriptjquerycsshtml

The Bootstrap navigation menu is not responsive as expected

Below is the HTML code for the navbar: <nav class="navbar navbar-light" style="background-color: #967BB6;"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" ...

javascripthtmlcsstwitter-bootstrap

I am interested in extracting information from the Firebase real-time database and showcasing it on my HTML webpage

I am struggling to display data from the Firebase real-time database on my HTML page. Even though I can see all the data perfectly in the console, it doesn't show up on the webpage. I attempted to use a for loop, but it still doesn't display the ...

javascripthtmlfirebasefirebase-realtime-database

Refining Content without the Need for a Submit Button in Django

To filter objects, I currently have to choose an option from the dropdown box and then click the submit button. However, I want the filtering process to happen immediately after selecting an alternative from the dropdown menu, without having to click the ...

pythonhtmldjango

What is the procedure for accessing a phone number in the phone app on an Android device using a webview

I have a Telegram Mini Application (TMA) where users can call sellers by clicking on a button in the seller details block. Issue: When a user clicks on the phone number button, the phone app opens without automatically entering the phone number. My curre ...

htmlnext.jsdomtelegram

Updating checkbox Icon in Yii2

Is there a way to customize the checkbox icon when it is checked in Yii2? Currently, I am adding a checkbox inside a div along with an icon: <i class="fa fa-check-circle icon-check-circle"></i>. However, the checkbox shows a default check symbo ...

javascriptjquerycssyii2yii2-advanced-app

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

htmlcss

What is the best way to determine the condition of a data-target attribute?

Is there a more optimal way to write the following code: <li [ngClass]="sidebarVisible ? 'nav-item' : 'nav-item sidebar-false-new-folder'" *ngIf="sidebarVisible"> <a (click)='this.createNewDirectory()' data-tog ...

angularhtmltypescriptangular6

Implementing Google Fonts into Next.js with the combination of Sass, CSS, and Semantic UI React

I have set up my next.config.js file with the following configuration: const withSass = require('@zeit/next-sass'); const withCss = require('@zeit/next-css'); module.exports = withSass(withCss({ webpack (config) { config.module. ...

cssreactjssassnext.js

Intersecting Hyperlink Elements Creating a Hover Effect

I've encountered a perplexing CSS display issue and I'm at a loss for alternative solutions besides simply widening the width of the parent div. Allow me to explain the layout: <div> <ul> <li> <a href="javascrip ...

css