Achieve a visually appealing layout by stacking multiple centered divs within Bootstrap columns using CSS

For a section on my website, I need to create three responsive columns where the ".service-icon" elements are centered in each column. The background image for the columns is currently set as dirtcolumn.png but can be replaced with a full-height div as long as it remains centered inside the column. You can view the issue on my website's first section under the cover by visiting the following links: MOST RECENT SCREENSHOT -

Below is the HTML markup I have tried:

<section id="services">
   <div class="container-fluid">
    <div class="row">

    <div class="columndirt col-md-4 text-center">
    <div class="service-icon">
    <div class="icon-daycare">
        </div>
        </div>
    </div>

    <div class="columndirt col-md-4 text-center">
    <div class="service-icon">
    <div class="icon-daycare">
        </div>
        </div>
    </div>

    <div class="columndirt col-md-4 text-center">
    <div class="service-icon">
    <div class="icon-daycare">
        </div>
        </div>
    </div>

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

And here is the CSS code being used:

#services {
background-color: #291501;
padding: 0px 0;
padding-bottom: 0px;
background-size: 100% 100%;
background-repeat: no-repeat;
text-align: center;
position: relative;
min-height: 590px;
display: block;
vertical-align: middle;
position: relative;
}

.columndirt {
float: none;
margin: 0 auto;
background-image: url(../images/cdh/newheader/ps/dirtcolumn.png);
background-size: cover;
background-repeat: no-repeat;
background-size: 70% 100%;
top:0;
bottom:0;
max-height: auto;
max-width: 37%;
min-width: 37%;
background-position: center;
text-align: center;
}
.service-icon {
float: none;
margin: 158px auto;
border-radius: 100%;
background-color: #6d4827;
background-image: url(../images/cdh/newheader/ps/dots.png);
background-size: 1500px;
display: inline-block;
font-size: 36px;
height: 170px;
line-height: 170px;
width: 170px;  
-webkit-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
}

.icon-daycare {
color: #9f6c43;
display: inline-block;
max-width: 100%;
min-height: 50%;
min-width: 100%;
background-image: url(../images/cdh/newheader/ps/daycareicon.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
csshtmltwitter-bootstrapresponsive

Answer №1

To determine the height of a div or section, it usually depends on the content within. However, if you wish to set a specific height, you can utilize min-height property or adjust the padding of the contents accordingly. Modify the padding values to achieve the desired height.

Below is the HTML code snippet:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/custom.css">
    </head>
    <body>
        <section id="services">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4">
                        <div class="columndirt">
                            <div class="service-icon">
                                <div class="icon-daycare">
                                    <div class="box text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="columndirt">
                            <div class="service-icon">
                                <div class="icon-daycare">
                                    <div class="box text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="columndirt">
                            <div class="service-icon">
                                <div class="icon-daycare">
                                    <div class="box text-center"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- BEGIN LINK --><a href="https:&#x2F;&#x2F;www.namecheap.com&#x2F;?aff=100108"><img src="http:&#x2F;&#x2F;files.namecheap.com&#x2F;graphics&#x2F;linkus&#x2F;200x200-4.gif" width="200" height="200" border="0" alt="Namecheap.com"></a><!-- END LINK -->
        <script src="js/jquery-1.12.3.min.js"></script>       
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

CSS Styling:

#services {
    background-color: #291501;
    /*background-image: url(../images/cdh/newheader/ps/dirtcolumns.png);*/
    padding: 0px 0;
    padding-bottom: 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    min-height: 590px;
    display: block;
    vertical-align: middle;
    position: relative;
    padding-top: 100px;
    //height: 500px;
}

.columndirt {
    border: 1px solid #fff;
    background: #fff;
}

.service-icon {
    float: none;
/*    margin: 0 auto;
    margin: 158px;
    margin-top: 180px;*/
    border-radius: 100%;
    background-color: #6d4827;
    background-image: url(../images/cdh/newheader/ps/dots.png);
    background-size: 1500px;
    display: inline-block;
    font-size: 36px;
    height: 170px;
    line-height: 170px;
    width: 170px;  
    -webkit-transition: background-color 0.2s ease;
    transition: background-color 0.2s ease;
    vertical-align: middle;

    margin: 100px 0;

}
.icon-daycare {
    vertical-align: middle;
    color: #9f6c43;
    display: inline-block;
    max-width: 100%;
    min-height: 50%;
    min-width: 100%;
    background-image: url(../images/cdh/newheader/ps/daycareicon.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.box{
    height: 30px;
    width: 30px;
    background: green;
    margin: 25px 0 0 70px;
}

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

In the latest version of Bootstrap, the carousel has been redesigned to smoothly transition across the entire page, providing a

I am currently in the process of learning Bootstrap 5 and decided to create a simple carousel by referring to the official documentation on Bootstrap 5 Carousel. Following their instructions, I copied their code and integrated it into my template. Howeve ...

htmlcsscarouselbootstrap-5

I am trying to figure out how to extract the filename from a form using PHP, but unfortunately, the $_FILES["filename"]["name"] method doesn't appear to be working. Can anyone help me with this issue

Having an issue with a form below that is supposed to extract some details into a mySQL database. Unfortunately, every time I try to retrieve the file in the form, it returns null. Unsure of the reason behind this, so any assistance would be much appreciat ...

phphtml

What is the role of z-index in relation to floating elements?

Why is it impossible to assign a z-index to a floated image and what are the reasons behind this limitation? ...

css

Ways to modify the color of cells in a table generated from JSON

In developing an HTML table based on JSON data, I have created a university semester map that displays student information including their ID, year, term, and required courses for graduation. While the table is successfully created, I aim to customize the ...

javascriptphphtmlmysql

Toggle the class and execute the order within a jQuery script

When the mouse moves in, the jQuery trigger enters the status. $(".test").bind("mouseenter mouseout", function(event) { $(this).toggleClass("entered"); alert("mouse position (" + event.pageX + "," + event.pageY + ")"); }); .entered { ...

javascriptjqueryhtmlcss

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

javascriptjqueryhtmlcssparallax

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...

javascripthtmlcss

Iterating through textboxes and buttons to trigger actions in JavaScript

Having an issue with JavaScript (or jQuery) where I can successfully input text and click a button on a page using the following script: document.getElementsByName('code')[0].value='ads0mx0'; document.getElementsByName('event&a ...

javascriptjqueryhtml

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

Web Essentials is experiencing a problem with minified CSS

Today, while using Web Essentials 2013 for Update 3 with Visual Studio Express 2013 for Web, I encountered an issue with the minified CSS file. The website I am currently working on is built on a Twitter Bootstrap platform and utilizes two separate CSS fil ...

csstwitter-bootstrapweb-essentials

What's the best way to retrieve the nth row of a div once the mouse hovers over

$(document).ready(function() { $('div').on('mouseover', function() { alert($('div:eq(' + this + ')')); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></ ...

jqueryhtml

Image-switching button

I'm new to JavaScript and struggling with my first code. I've been staring at it for two days now, but can't figure out what's wrong. The goal is to create an HTML page where the user can change an image by clicking on a button, and th ...

javascripthtml

Is it possible to insert HTML content as plain text into a div?

Currently, I have a code that extracts HTML stored in a string and places it into a div with the contenteditable attribute set to "true". However, I'm facing an issue where the HTML is being executed as part of the page instead of being treated as tex ...

javascripthtml

Finding the current HTML page URL in Ionic 2: A step-by-step guide

Can the URL of the current HTML page be obtained and then converted to PDF using the cordova-pdf-generator package? ...

htmlpdfnpmionic2

What are the differences between ajax loaded content and traditional content loading?

Can you explain the distinction between the DOM loaded by AJAX and the existing DOM of a webpage? Is it possible to load all parts of an HTML page via AJAX without any discrepancies compared to the existing content, including meta tags, scripts, styles, e ...

javascripthtmlcssajaxdom

How can I retrieve the HTML content of a ReactJS rectangle element saved in an array?

Within a loop, I am creating rectangle elements and adding them to an array: rectangles = []; render: function() { for (var i = 0 ; i < 10; i++) { rectangles.push (<Rectangle height={this.props.afm} width={this.props.afm} x={xpos} y={ypos} va ...

htmlarraysreactjsstyleselement

Converting an HTML table into a visual image

I've encountered an issue. My task involves transferring an HTML table to a PDF using fpdf. Is there a way to transform an HTML table into an image (via URL link)? ...

phphtmlfpdf

I constructed a table using a loop, and now I am interested in setting up a click event for each individual cell

for (int i = 0; i < ds.Tables[0].Rows.Count; i++) { string empCode = ds.Tables[0].Rows[i]["EMP_CODE"].ToString(); string empName = ds.Tables[0].Rows[i]["EMP_NAME"].ToString(); string gradeCode = ds.Tables[0].Rows[i]["GRADE_CO ...

javascriptc#htmlcssasp.net

A guide to configuring the default date format as ('dd/mm/yyyy') using ng-bootstrap

html <label for="date">{{ "date" | translate }}</label> <input type="date" class="form-control checking-field" id="date"> Is there a way to display the date in the format ('dd/mm/yyyy') in this HTML code? ...

htmlangularbootstrap-4

When the horizontal scroll is turned off, it also disables the functionality of my mobile-friendly

I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling: html, body { overflow-x: hidden; } This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems ...

javascripthtmlcssreactjstailwind-css