What is the best way to align a square div in the center between two columns using Bootstrap?

I am working on a layout that consists of two columns in a row with col-6, and a jumbotron. Here is the code snippet I have:

<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
    <h1>Test</h1>   
</div>          
<div class="container-fluid">
  <div class="row">        
    <div class="col-md-12">        
      <p class="text-center square">TEST</p>        
    </div>        
  </div>
  <div class="row">
    <div class="col-sm-6">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>           
    </div>
    <div class="col-sm-6">
      <h3>test</h3>        
    </div>   
  </div>
</div>

Here is the styling used:

.square {
  height: 50px;
  width: 50px;
  background-color: #9FB6A6;
  border-radius: 3px;  
}

This is the desired outcome:

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

My attempted solutions include using the text-center class and adjusting the z-index. However, I am unable to position the square div over the jumbotron as shown in the reference image.

For further clarity, here is a link to a jsfiddle showcasing the current behavior:

https://jsfiddle.net/rmjy5pch/

I would appreciate guidance on how to achieve the desired layout.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're looking to achieve a specific layout, consider using absolute positioning as shown in the example below:

Check out this JSFiddle demo for reference

<body>

<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
  <h1>Test</h1>

</div>

<div class="container-fluid position-relative">
  <div class="square-container text-center">
    <p class=" square">TEST</p>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>
    </div>
    <div class="col-sm-6">
      <h3>test</h3>
    </div>
  </div>
</div>
</body>

.square {
  height: 50px;
  width: 50px;
  background-color: #9FB6A6;
  border-radius: 3px;
  margin: 0 auto;
}

.square-container {
  position: absolute;
  top: -60px;
  width: 100%;
}

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

Answer №2

Consider including margin:0 auto; within the styling of the .box

Answer №3

.rectangle {
  height: 60px;
  width: 40px;
  background-color: #9FB6A6;
  border-radius: 5px; 
  margin: -10px auto 0;
}

What if we include margin:0 auto in the rectangle class?

Answer №4

Exploring the World of HTML and CSS

.container{
    display:flex;
    flex-direction:column;
    background:white;
    border: 0.5px solid black;
    position: relative;
}
.second{
    display:flex;
}
.first{
    height:120px;
    border-bottom: 0.5px solid black;
}
.second div{
    flex: 1;
    height:120px;
}
.centerText{
    position:absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    color:white;
    padding: 10px 20px;
    border-radius:2px;
}
<div class="container">
  <div class="first">
   Jumbotron
  </div>
  <div class="centerText">Test</div>
  <div class="second">
  <div>Col -6</div>
  <div>Col -6</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

What is the best way to upload a file to a server while working with Vue.js in the Filemanager plugin, or how can I access a global function

How can I upload a file to the server using Vue.js in the Filemanager plugin? I have tried multiple methods and the console log shows that the upload was successful, but I am not able to see any files on the server. Does anyone know what could be wrong? & ...

javascriptvue.jsvuejs2vue-component

Exploring the functions of the elasticsearch javascript library: Understanding the search_type feature

Currently, I am attempting to run a search query using search_type of count with the elasticsearch.angular.js version sourced from the npm module. The query can be successfully executed as follows: POST /index1/type1/_search?search_type=count { " ...

javascriptangularjselasticsearchnpm

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

htmlcsslaravellaravel-5

I can't decide which one to choose, "ngx-bootstrap" or "@ng-bootstrap/ng-bootstrap."

Currently, I am in the process of deciding whether to use Bootstrap 4 with angular 4 for my upcoming project. However, I find myself torn between choosing npm install --save @ng-bootstrap/ng-bootstrap or npm install ngx-bootstrap --save. Could someone pl ...

twitter-bootstrapangulartypescriptbootstrap-4

"Discovering the missing numbers in an array using JavaScript - a step-by-step guide

I have a series of numbers in a string, such as "3 -1 0 5". My goal is to create another string that lists the missing numbers from the original sequence once it has been sorted. For example, if the original array is sorted as [-1, 0, 3, 5], then ...

javascriptarraysalgorithmnumbers

Exploring the World with the vue-i18n Plugin

Recently, I have integrated translation into my app and now I am looking to implement a button event that allows users to change the language on the home page. For this task, I referred to two tutorials: Localization with Vue and Localization with Vue Tut ...

javascripthtmlvue.jslocalizationvue-i18n

How can a 'complete' event listener be executed for a custom function in JQuery/JavaScript?

Here is the code snippet I'm working with: $('.fblikes span').fblikecount(); $.fn.fblikecount = function(){ //Perform JSON XHR operations to retrieve FB like counts and update the page numbers } This code will cycle through all insta ...

javascriptjquerycallbackevent-handling

Encountering the error message "Unexpected token export" while attempting to implement the "framer-motion" package with Webpack

My experience with NextJS has been smooth sailing until now. I recently added the "framer-motion" module to animate some components, and it caused a major issue. Whenever I navigate to a page containing the import statement: import { motion } from "fr ...

javascriptwebpackecmascript-6babeljsnext.js

Utilize CSS scrolling to present all items in a single line

Looking to showcase images in a horizontal line with scroll functionality? Unsure of how to achieve this and would really appreciate some guidance. CSS .img { max-width: 400px; position: relative; } .animal { float: left; background-color: #fff; ...

css

Tips for utilizing a received variable within an ejs document

I am currently attempting to update the content of an HTML element in an EJS file with a variable that I have defined in a JavaScript file. let checkbox = document.querySelector('input[name="plan"]'); checkbox.addEventListener('ch ...

javascriptnode.jsexpressvariablesejs

In PHP forms, ensure that only completed textboxes are submitted and empty textboxes are discarded

I've created a form that displays all available products from a database along with their prices. Users can input the quantity they want to purchase for each product, and upon submission, the total amount will be calculated. There are 5 products in th ...

javascriptphphtml

During DragAndDropToObject in Selenium IDE, the initial element in the list is overlooked

I have a webpage that is split into two datagrids. The left datagrid is structured like this: <ul class="left_dg"> <li> <ul></ul> </li> <li> <ul></ul> </li> <li&g ...

jqueryhtmlcssseleniumdrag-and-drop

Implementing Material-UI Autocomplete: How to Include a Starting Value for the startAdornment

I am using autocomplete with multiple selection permission. https://codesandbox.io/s/bold-jackson-dkjmb?file=/src/App.js In the provided example, there are 3 options for cities. How can I manually insert a value in TextField that is automatically selected ...

javascriptreactjsautocompletematerial-ui

Firefox has trouble with jQuery AJAX as anchor tags in returned HTML are not clickable

The issue at hand: In Firefox, anchor tagged text in the returned HTML is not clickable (no "hand cursor" and no action), while IE 10 seems to handle it without any problems. The scenario: I am utilizing jQuery AJAX to request a PHP page that fetches HTML ...

jqueryhtmlajaxhyperlinkanchor

The Javascript function I created is simply showcasing some code on my HTML webpage

Having trouble incorporating images from my JS file using innerHTML - the output in my HTML file is just plain text instead of displaying images. This function is located within a class in the following JS file: setCardHtml(){ let imageHtml = this.card ...

javascripthtmlfunctioninnerhtml

Validation of form inputs does not occur during typing, only when the input is blurred

Currently, I have implemented a combobox with input data validation using Vuelidate: <template> <v-combobox clearable v-model="surname" :items="commonSurnames" label="Surname" ...

javascriptvue.jsvuetify.jsvuelidate

Tips on executing a $.get request while submitting a form?

Instead of using AJAX to submit my form, I am trying to implement a progress bar by making GET requests to the server while the form is submitting. This is particularly important when dealing with multiple file uploads that may cause the submission to take ...

javascriptajaxhtmlformsupload

The quiet harmony of FeathersJS and Socket.io as they attentively listen to events is

I've been working hard to get everything set up and running smoothly, but it seems like I'm stuck on the last piece of the puzzle. Despite following the documentation closely, I can't seem to figure out what I'm missing. Here is the @an ...

javascriptnode.jssocket.iofeathersjs

The simulated function is not being invoked while inside an asynchronous function

Summary: I encountered issues with my tests after making some code changes. I recently added asynchronous conditional checks to some existing code, resulting in my tests failing unexpectedly. The tests were set up to ensure that a mock function passed as ...

javascriptreactjsunit-testingasync-awaitjestjs

Using an arrow function in Aurelia to read a json file

I've been exploring Aurelia and delved into tutorials on PluralSight and Egghead.io, but I'm still struggling to resolve my current issue. In a JSON file named bob.json, there is a collection of objects related to Bob. Each object in the collect ...

javascriptjsonlambdaaurelia