Tips for arranging flex children on top of one another

I am looking to position and center both boxes so that they overlap in the middle of the screen, without specifying a fixed width and height.

Additionally, I want to incorporate CSS transitions to make box 1 disappear and reveal box 2 upon clicking a button.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="container w-100 bg-dark" style="height: 400px;">
  <div class="d-flex justify-content-center align-items-center bg-light h-100">
    <div class="bg-white px-4 py-4 rounded shadow" style="z-index: 1">
      <p>
        Box 1
      </p>
    </div>
    <div class="bg-white px-4 py-4 rounded shadow" style="z-index: 2">
      <p>
        Box 2: More Content <br>
        Lorem Ipsum
      </p>
    </div>
  </div>
</div>

htmlcssbootstrap-4flexboxcentering

Answer №1

If you're working with Bootstrap 4, you may find it challenging to implement CSS grid layouts since Bootstrap 4 doesn't come with CSS grid classes. However, you can use custom CSS to achieve the desired layout. For more information on CSS grid, check out this guide.

If upgrading to Bootstrap 5 is an option for you, it offers built-in support for CSS grid. You can learn more about it here.

Below is an example of custom CSS for creating a grid layout:

setInterval(function() {
  $('p:first-child').fadeIn(3000);
  $('p:last-child').fadeOut(3000);

  setTimeout(function() {
    $('p:first-child').fadeOut(3000);
    $('p:last-child').fadeIn(3000);
  }, 3000);
});
.grid-box {
  display: grid;
  grid-template-columns: repeat(1, [col] 100px);
  grid-template-rows: repeat(1, [row] auto);
}

.top,
.bottom {
  grid-column: col 1 / span 1;
  grid-row: row 1;
  z-index: 20;
  background: #fff;
}

.bottom {
  z-index: 30;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="container w-100 bg-dark" style="height: 150px;">
  <div class="d-flex justify-content-center align-items-center bg-light h-100">
    <div class="bg-white px-4 py-4 rounded shadow grid-box">
      <p class="top">
        Box 1
      </p>

      <p class="bottom">
        Box 2: More Content <br> Lorem Ipsum
      </p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

Dynamically showcasing content in an HTML table

Having trouble with this code snippet. It's supposed to iterate through array objects and display them in an HTML table. The third row should have buttons, but nothing is showing up. Can you spot the issue? Here's the HTML code: <html> & ...

javascripthtmlhtml-table

Unable to align text in the middle of the header

Seeking help with my design flaws, I have created a fiddle to showcase the issues that arise when attempting to make it responsive. The main problem is that the HEADING IN CENTER text is not aligned properly in the center. If I remove the position attribut ...

htmlcssresponsive-designsemantic-ui

Ensure that children elements are aligned to the bottom by setting the axis of the HTML

Elements positioned within a parent DIV typically flow from top to bottom. Even when using Javascript to add elements to the parent DIV, they maintain this top-to-bottom positioning. I am interested in achieving a bottom-to-top axis alignment within the pa ...

javascripthtmlcsspositioningaxis

The callback function fails to execute the click event following the .load() method

Hey there, I've hit a roadblock and could really use some help figuring out where I went wrong. Let me break down my script for you. On page1.html, I have a div that gets replaced by another div from page2.html using jQuery's .load() method. Here ...

javascriptjqueryhtmlcssajax

Switching Text in ReactJS from V to X: A Tutorial

I have been utilizing a Switch component from react-switch in my project. import Switch from 'react-switch'; render() { return <Switch onChange={this.onChangeStatus} onClick={this.onChangeStatus} c ...

cssreactjs

When data is submitted through the POST method, it mysteriously disappears

When I send the "user" variable to another page called Survey.php, here's how it looks: In the index.html file: <form action="Survey.php" method="post" name="frm"> <div><input type="text" name= ...

javascriptphphtmlformspost

The Bootstrap card is elegantly framed by a crisp white border surrounding the

After referencing a tutorial, I implemented the following code: <div class="card" style="width:400px"> <img class="card-img-top" src="image.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</ ...

csstwitter-bootstrapbootstrap-4

Applying Bootstrap classes to adjust font weight

Are there any pre-existing Twitter Bootstrap classes that can be used for styling font weight, such as font-weight: bold and other variations? I'd prefer not to reinvent the wheel if Bootstrap already has this capability. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Troubleshooting: PHP Integration Issue with HTML Document

I have a simple HTML file displaying text and including a PHP file with basic echos: The HTML code is in 'home.html' file: <html> <body> <h1>Welcome to my home page!</h1> <p>Some text.</p> <p>Some more ...

phphtmlcssxampp

Preserving content following the use of jQuery's fadeIn/fadeOut methods

I have a jQuery function that fades in and out a sprite (sprite without text) from one background to another, and it's working as intended. However, this function is also fading out the text within an element. HTML: <div id="menu"> <ul c ...

jquerycssfadeinfadeout

How can I create a table that is 100% width, with one column that has a flexible size and truncates text

I am currently facing an issue with a table nested within a div that is absolutely positioned on my webpage. I want to set specific widths for the second, third, etc columns while allowing the first column to automatically resize, even if it results in tru ...

htmlcsshtml-table

Place text within SVG in alignment

There seems to be an issue with aligning text in Adobe Illustrator when exporting graphics to SVG. When the text is initially exported, it is aligned to the center, but if you change the text using JavaScript from "Default text" to "New text", the alignmen ...

csssvgadobe-illustrator

Adjusting the repeating-linear-gradient CSS background

My goal is to make adjustments to a specific CSS code, in this case it is the repeating-linear-gradient. Take a look at my current implementation: input[type="range"]::-moz-range-track { background: repeating-linear-gradient(to right, #ccc, # ...

csslinear-gradients

What is the process for setting up a banner on one page that will automatically be reflected on all other pages?

Is there a way to have a banner in a div and display it on the home page so that it automatically appears on all other pages without needing to place the code on each page individually? Any assistance would be greatly appreciated :) ...

javascriptphphtmlcss

Tips for making li elements scroll horizontally whilst fitting all elements on one line exclusively using CSS

I am attempting to alter the default scrolling behavior of li elements from vertical to horizontal in HTML. I have successfully achieved this, but the output displays a succession of lists in a line, followed by another list below it. However, I desire to ...

htmlcss

``It has come to our attention that ALT texts are not displaying properly on popular email clients such as Outlook,

Despite following all the email standards and attempting to style the ALT tag, most major email clients do not display the ALT text when images fail to load. Is there a workaround for this issue or does it primarily depend on the specific email engine bein ...

htmlhtml-email

What steps do I need to take in Bootstrap 5 to add a search icon to the navbar that reveals a search box beneath it when clicked?

I've made progress on the navbar design Now, I'm looking to add a search icon next to the login button. Clicking on the search icon should reveal a search box below the navbar, similar to the image shown below. My transparent navbar has a relati ...

javascripthtmlcssbootstrap-5

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP

I encountered an issue while working on a script that involved displaying query data based on domain type (referred to as typeX & type Y). To achieve this, I utilized the jQuery slidetoggle function along with some CSS. Everything was functioning perfectly ...

phpjqueryhtmlcss

What are the steps for implementing the innerClass style on the searchBox within the appBase?

I'm currently incorporating the searchBox component from appbase io into my upcoming js web application, but I've been facing challenges in customizing the layout of both the search box and the list. Despite following the documentation which sug ...

cssreactjsobjectnext.js

Issues with displaying ngAnimate animations

For the past 10 hours, I've been attempting to get my animations to function properly. It seems that they only work when I include the animate.css stylesheet and use the "animated classname". However, when I try to create custom entrance and exit anim ...

javascriptcssangularjsng-animate