Reduce the height of a single column in Bootstrap

My goal is to create a footer design using Bootstrap that looks like this:

https://i.sstatic.net/7xsKg.png

I've successfully set up the left column (Red Background) of the footer, but I'm having trouble styling the right column (Black Background). When I try to set the height to 70%, it shrinks to fit the content. I understand this is related to not setting a height for the parent container. How can I set a fixed height while maintaining responsiveness? Would media queries be the solution?

Additionally, when I use display: flex for the right-column containing two rows (links and white logo), the rows are displayed as columns next to each other. If I don't do this, the content alignment doesn't work correctly.

Can anyone provide assistance with this issue? It seems like there's something important about grid systems and display utilities that I may have missed.

This is how it currently appears:

https://i.sstatic.net/JNmGT.png

Here is my code:

<footer class="mt-auto" role="contentinfo">
<div class="container-fluid h-100">
    <div class="row footerContainer d-flex h-100">

        <div class="footerLeftCol col-12 col-md-7">

            <div class="row pl-5 justify-content-center">
                <div class="col-12 mt-3 mb-3"><img
                            src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo_white.png"></div>
            </div>

            <div class="row align-items-center text-center">

                <div class="col-12 col-md-6 contactColLeft">
                   
                </div>

                <div class="col-12 col-md-6">
                   
                </div>
            </div>

            <div class="row text-center mt-3 pb-3">
                <div class="col-12">
                    <a><i class="fab fa-instagram fa-lg mr-2"></i></a>
                    <a><i class="fab fa-facebook-square fa-lg"></i></a>
                </div>
            </div>

            <div class="col-md-12 copyright">
                <p class="text-center pt-2">&copy; Copyright <?php echo date( 'Y' );  ?> - All rights
                    reserved.</p>
            </div>

        </div>

        <div class="footerRightCol d-flex col-12 col-md-5">

            <div class="row text-center align-items-center justify-content-center ">
                <div class="col-12 flex-grow-1">
                    <h4> Impressum </h4>
                    <h4> Datenschutz </h4>
                    <h4> Sitemap </h4>
                </div>
            </div>

            <div class="row  flex-grow-1 justify-content-end mr-3 mt-auto text-center">

                <div class="col-6">
                    <h4> Designed by </h4>
                </div>
                <div class="col-6">
                    <img src="<?php echo get_stylesheet_directory_uri()?>/images/logo_fewture.png" style="height: 50px">
                </div>
            </div>
        </div>

    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

To make the second column grow from the bottom, you can use display: flex along with flex-direction: column and justify-content-end.

Simply place your content inside the second column div, and it will start to expand upwards.

.box-1 {
  height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row border border-primary p-2">
    <div class="col-12 col-md-6 border border-secondary box-1">Column 1</div>
    <div class="col-12 col-md-6 border border-secondary d-flex flex-column justify-content-end p-2">
      <div class="border border-danger p-2"/>
        <p>As the content is growing</p>
        <p>Justify content end with</p>
        <p>Flex direction column</p>
        <p>Will make content growing up :)</p>
      </div>
    </div>
  </div>
</div>

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

Displaying singular row from jQuery AJAX response on a DataTable

Two different functions were created using jQuery. The first function, table(), loops through an object from JSON response in a jQuery Ajax success and then calls the second function, column(), with a parameter being an element of the array from the object ...

javascriptphphtmljquerylaravel

How to apply hover effect to an image within a div using TailwindCSS

Is there a way to animate only the image and not the entire card (div) when hovering over it? I want specifically for the image to perform an animation, such as bounce effect. I'm using next/image for displaying the image. Can this animation be achie ...

cssnext.jstailwind-css

Stylish CSS popup backdrop

I have very limited CSS knowledge and struggle with the syntax, but I am trying to customize my Wikipedia experience using Chrome and the Stylish addon. I found some code online and modified it to create a dark theme, but now I'm stuck because I need ...

htmlcssstylish

Attempting to dynamically assign a nickname to a CSS element selector during runtime

I have been attempting to adjust the position of a font awesome icon within an input field dynamically. My goal was to have the style calculated at runtime, similar to how I've handled other stylesheet elements in the past. However, I am facing diffic ...

htmlcsstwitter-bootstrapfont-awesome

Discover the seamless method of transferring data from an HTML5 form to a PHP page for processing without the need to refresh the page or manually navigate to the PHP file

When creating a website, I encountered an issue with a form that requires the user to select three options from select elements and then click a search button to search the database. The problem is that PHP does not retrieve the form data unless the button ...

phphtml

Trimming Text with JQuery

My goal was to truncate a string and add an ellipsis at the end using jQuery, but my code doesn't seem to be working as intended. Below is the jQuery code I wrote: $(".link-content > h4").each(function(){ var len = $(this).text().length; ...

jqueryhtmlcss

Ways to properly close open HTML tags using node.js?

Have you ever encountered a situation where user-entered content from a database or similar source only contains the opening tag without the closing tag? This can disrupt the layout of your website. Is there a way to fix this issue using Node.js on the s ...

javascripthtmlnode.js

Create a bootstrap table with td elements that have no wrap for their content

I am currently developing an application using springboot, thymeleaf, and bootstrap. Here is the snippet of the html code I'm working with: <!doctype html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <h ...

htmlspring-bootmavenbootstrap-4thymeleaf

Designing a visual showcase with interactive tab links for image selection

I have been working on developing an Angular component that simulates a tab gallery functionality, inspired by this example. Below is my HTML structure: <div class="gallery-container"> <div class="display-container"> ...

htmlangulartypescript

Sorting `divs` based on the number of user clicks in JavaScript: A simple guide

I've implemented a script that tracks the number of clicks on each link and arranges them based on this count... Currently, everything is functioning correctly except when the <a> tags are nested inside a div. In such cases, the script ignores ...

javascripthtmlcss

PHP Error Caused by HTML TableORPHP Th

This is a piece of code I have written if ($result!==false) { $html_table =<table align="center" border="1" cellspacing="0" cellpadding="10" width="1000" word-wrap="break-word" display="inline-block"> <tr><th>Bank</th><th>Pro ...

phphtmlmysqlhtml-table

Text not aligned with Line Height

I'm currently working on centering two spans horizontally within a 150px div. My initial thought was to set the line-height of each span to 150px, but for some reason, the text isn't aligning properly using this approach. Below is the code I hav ...

csshtml

What is the best way to activate materialise pop-up menus in a React application?

Looking to enhance my React app by adding a NavBar with dropdown functionality. Here's the code snippet: <ul id="dropdown1" className="dropdown-content"> <li><NavLink to="/create">Create lesson ...

cssreactjsexpressmaterializemern

Apply the "active" class to the list item when its corresponding section is in view

I have a webpage with at least four sections. My goal is to dynamically apply the active class to the corresponding menu item when scrolling through each section. For instance, if the "About Us" section is visible on the screen, I want to mark the correspo ...

javascripthtmljquerycss

What's the difference between using find_all on a bs4.element.ResultSet object and a list in Beautiful Soup

When I use the find_all method on a beautifulsoup object, it returns either an bs4.element.ResultSet object or a list. However, I am unable to directly apply the find_all method on the bs4.element.ResultSet object. One way to work around this is by loopin ...

pythonhtmlbeautifulsouphtml-parsing

Difficulty displaying images on an HTML canvas

Currently, I have a function named next that is designed to retrieve the time (just the hours) and then compare the hours using an if statement to determine which clock image to load into the imageURLs[] array. Based on my observations, this part seems t ...

javascriptjqueryhtmlimagecanvas

Is it possible to find a match by searching through multiple arrays for a corresponding variable name?

Hi there, I'm currently working on a function that triggers an alert if the name of an array of images matches the data attribute of the selected element. This is just a test phase before proceeding with my main project, but I've hit a roadblock. ...

javascripthtmlarrays

What's the significance of the #/ symbol in a URL?

Currently, I am developing Ruby on Rails web applications. The URL of my webpage appears as follows: http://dev.ibiza.jp:3000/facebook/report?advertiser_id=2102#/dashboard From this link, I have identified that the advertiser_id is 2102 but I am unsure a ...

htmlruby-on-railsangularjswebfragment-identifier

Here's a solution to prevent the "jump" effect when hiding elements in a navbar

Currently, I am facing an issue with my h5 elements within the navbar when scrolling. I am using Bootstrap 4 and jQuery for this project. The problem arises in my navbar where there are four sets containing an icon, followed by an "h5" and then a "p" elem ...

jquerycssbootstrap-4hideelement

Transferring data from the Server-Side dataTable to a modal | Creating a personalized row button for dataTable

I have integrated a tutorial from datatables.net into my test page, which can be found at this link: . However, I am facing an issue where I am unable to pass selected data into a modal, and the modal does not open at all. EDIT: Here is the code snippet f ...

phphtmlajaxdatatablesqlsrv