Fixing content at the bottom inside a container with Bootstrap 4

My app is contained within a <div class="container">. Inside this container, I have an editor and some buttons that I always want to be displayed at the bottom of the screen. Here's how it looks:

<div class="container>
  // content here....

  <div id="bottom" class="submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>

I've attempted to adjust the min-height and height properties of html, body, and container to 100%, but adding !important to these rules doesn't extend my div container further down. Using the "fixed-bottom" Bootstrap class causes the #bottom div to exceed the boundaries of the container, resulting in an unsightly layout.

Any suggestions for fixing this issue?

htmlcssbootstrap-4

Answer №1

Enclose your "submit-form" within another container or utilize col-* for positioning purposes.

For instance:

<div class="container">
  <!-- some content.... -->


  <!-- this should always be displayed at the bottom! -->
  <div id="bottom" class="container fixed-bottom submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>
</div>

Adjust the size of your div using the col-* class (Bootstrap grid consists of 12 columns, so the following div will occupy 4 columns of screen space):

<div class="container">
  <!-- some content.... -->


  <!-- this should always be displayed at the bottom! -->
  <div id="bottom" class="col-4 fixed-bottom submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>
</div>

Once this is done, the form will align to the left side of the screen.

Utilize d-flex to position your Bootstrap column:

<div class="container">
      <!-- some content.... -->
    
    
      <!-- this should always be displayed at the bottom! -->
     <div class="d-flex justify-content-center fixed-bottom">
        <div id="bottom" class="col-4 submit-form">
         <div id="editor"></div>
        <div class="btn btn-grp" ></div>
  </div>
     </div>
   </div>

If you aim to develop a responsive website, it is recommended to learn more about the Bootstrap grid system and replace col-* with col-md-*, col-sm-*, etc.:

https://getbootstrap.com/docs/4.0/layout/grid/

Answer №2

In case you are utilizing BS4, there is a multitude of classes provided by BS that can help you achieve your intended output.

To demonstrate the desired result, I have added some height to the row. However, once actual content is present in the container, there should be no need for any height on the row.

IMPORTANT: If for any reason you prefer not to use a row, simply apply the class d-flex to the container and keep everything else unchanged.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
<div class="container">
<div class="row" style="height: 200px;">
<div id="bottom" class="submit-form align-self-end">
    <div id="editor"></div>
    <div class="btn btn-grp" >Button</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

Display information from a .js file onto an HTML webpage

I'm completely new to the world of server-side development and I'm attempting to navigate it on my own. Currently, I have a server written in JavaScript using Express and I'm trying to display some content on my HTML page that was sent from ...

javascripthtmlnode.jsexpress

Arrangement of HTML divs and styling classes

I have been experimenting with divs and classes in order to achieve proper alignment of text on my website. Currently, I am working with 2 classes that I would like to display side by side to create 2 columns. However, the right column containing the text ...

htmlcss

Creating a PHP-enabled HTML button that spans multiple lines

Currently, I am working on creating a list of buttons with h5 text. The issue I'm facing is that all the buttons have the same width, but when the text exceeds this width, the button expands. I would like the text to span multiple lines without affect ...

phphtmlcss

The art of selecting elements and attaching event listeners in a React environment

Currently, I am working on my portfolio website using Gatsby. The layout includes a sidebar on the left with navigational links (Home, About, Work, etc.), and the main content is displayed as one long strip of sections on the right. When a user clicks on a ...

javascriptcssreactjsevent-listener

Tips for modifying the class of a span inline element using a javascript function

Looking for assistance in creating a password text box with an eye icon that toggles visibility. When the user clicks on the eye icon, it should change to a crossed-out eye icon and switch the input type to text. <div class="input-group show-hide-passw ...

javascriptcssbootstrap-4

What causes the text in my navigation bar to shift upwards after incorporating Bootstrap into the design?

I took inspiration from a Youtube video and imported a navigation bar. Testing out Bootstrap, I noticed that the font of the text changed and the links shifted within the bar. How can I revert the text to its original appearance without Bootstrap? Origina ...

phphtmlcssbootstrap-5

I am struggling to make the horizontal scroll and fixed column features work in dataTables. The rendering seems to be inconsistent across different platforms. Can anyone help me figure out what I am doing incorrectly?

I've dedicated countless hours to unraveling this conundrum. I'm in urgent need of creating a table that mirrors the layout displayed on this webpage: https://datatables.net/extensions/fixedcolumns/ The desired functionality involves both verti ...

jquerycsstwitter-bootstrapscrollbardatatables

Is there a way to adjust the placement of text in an HTML document?

Just starting out with web development and created some HTML code: <html> <body> {errors} <p>Input your numbers:</p> <form method="post" action="."> <p><inpu ...

htmlcsscss-positionwebfonts

Showcase two featured WooCommerce categories on the homepage

On my main page, I am looking to display two categories, mobile and laptop, simultaneously. However, the code I'm using only shows one of the categories. Any assistance would be appreciated. Thank you! <?php $products= new WP_Query( array( ...

phphtmlwordpresswoocommercee-commerce

Having trouble displaying the Order List in Tailwind CSS and Next.js?

I am having trouble displaying an ordered list on my page. I have tried using the <ol> tag, but for some reason the numbers are not showing up. Even when I switch to the <ul> tag, it's still not working properly. Take a look at this scree ...

htmlnext.jstailwind-css

Difficulties encountered when trying to store a checkbox array data into a database

Within my application, I am faced with the task of extracting checkbox items from a list and storing them in my database. Currently, I am assembling these items into an array by iterating through the options, adding a checkbox before each one, and assignin ...

phpjqueryhtml

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

I'm facing an issue with submitting multiple forms on a page without submit buttons. I have a script that submits all three forms at the same time, but it's creating separate rows in the database instead of one combined row. Any suggestions on ho ...

htmlforms

Ways to modify the appearance of the button within ion-calendar

Looking to customize the styling of ion-calendar classes Attempting to add styles to the ion-calendar-month class, but not seeing any changes take effect. ...

javascriptcssangularionic5

Set the CSS table to have a width of 100% and ensure that the table data cells have hidden

My table has a 100% width, and some of the td elements have overflow hidden. I want to make their text appear as ellipsis when it's too long. I can achieve this with fixed td sizes, but I need them to be relative to the content. This question was fi ...

htmlcsshtml-tableoverflow

Issue with the overall layout in Bootstrap 4 involving the main content area and sidebar

I am encountering challenges with the overall design of my website, particularly with how the main content area and sidebar are positioned. The layout I have in mind is: https://i.sstatic.net/PYphE.jpg Below is the code snippet I am using to implement th ...

htmlcssbootstrap-4

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

I am working on a project using express, node, and ejs and I want to be able to use different stylesheets for different views. In order to render a specific view with its corresponding style, I have included the following in my app.js file: app.get('/ ...

cssnode.jsexpressejs

What is the best way to evenly space 3 divisions in a row so that the last element is centered on the page?

Is there a way to align three divs horizontally, evenly spaced, in a manner that positions the rightmost element at the center of the page? ...

htmlcssformatting

retrieving data in tabular form from a website

Looking to extract a table from this website by clicking on the "National Data" option. While I could easily download it, my interest lies in learning web scraping techniques. Previously, I utilized Python's Selenium package to automate the process of ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Activate the button when the password is correct

Check out my code snippet: $("#reg_confirm_pass").blur(function(){ var user_pass= $("#reg_pass").val(); var user_pass2=$("#reg_confirm_pass").val(); var enter = $("#enter").val(); if(user_pass.length == 0){ alert("please fill password ...

javascriptphpjqueryhtmlcodeigniter

Transform this color matching game into an image matching game using JavaScript and jQuery

I have a color matching game that I would like to enhance by matching background-images instead of just background-colors. However, I am facing difficulties in making this change. For instance, instead of matching the color red with the text "red," I wan ...

javascriptjqueryhtmlcss