Making absolute positioning responsive in Bootstrap 4 - a comprehensive guide

Question

Making absolute positioning responsive in Bootstrap 4 - a comprehensive guide

I am looking to enhance the responsiveness of my page, especially on smaller screens.

Currently, I have not utilized bootstrap for this purpose. I am contemplating whether I should use it or not. Can I utilize bootstrap for absolute positioning?

Thank you in advance for your assistance. I hope the question is clear with the provided drawings.

<div class="container-map">
    <div class="top-container">
        <div class="map-background">

        </div>
        <div class="map-filter">

        </div>
    </div>

    <div class="map-search-results">

    </div>
</div>

Below is the CSS code:

.top-container{
   height:100%;
   position:relative;
}

.map-background {
  z-index: 10;
  width: 100%;
  height: 100%;
}
.map-filter {
  z-index: 1000;
  top:5%;
  left:7%;
  min-height:50px;
  min-width:200px;
  position: absolute;
}
.map-search-results{
    width: 100%;
}

You can view the image here.

Desired layout shown in the image below:

You can check out the desired layout here.

css bootstrap-4

Answer 1

Answer №1

This information could be beneficial.

   body, html{
      padding:0;
      margin:0;
    }
   .top-container{
   height:100%;
   position:relative;
}

.map-background {
  z-index: 10;
 width:100%;
 height: 500px;
  background:lightblue;
}
.map-filter {
  z-index: 1000;
  top:5%;
  left:7%;
  min-height:50px;
  min-width:200px;
  position: absolute;
  border:5px solid red;
}
.map-search-results{
    padding:20px;
    border:5px solid orange;
}
@media (max-width:767px){
  .map-filter{
    position: relative;
    left:0;
    top:0;
    margin-top: 20px;
    margin-bottom: 20px;
    padding:20px;
  }
}

  <div class="container-map">
      <div class="top-container">
          <div class="map-background">

          </div>
          <div class="map-filter">
            <h2>map filetr</h2>
          </div>
      </div>

      <div class="map-search-results">
        <h2>map search</h2>
      </div>
  </div>

Answer 2

This information could be beneficial.

   body, html{
      padding:0;
      margin:0;
    }
   .top-container{
   height:100%;
   position:relative;
}

.map-background {
  z-index: 10;
 width:100%;
 height: 500px;
  background:lightblue;
}
.map-filter {
  z-index: 1000;
  top:5%;
  left:7%;
  min-height:50px;
  min-width:200px;
  position: absolute;
  border:5px solid red;
}
.map-search-results{
    padding:20px;
    border:5px solid orange;
}
@media (max-width:767px){
  .map-filter{
    position: relative;
    left:0;
    top:0;
    margin-top: 20px;
    margin-bottom: 20px;
    padding:20px;
  }
}

  <div class="container-map">
      <div class="top-container">
          <div class="map-background">

          </div>
          <div class="map-filter">
            <h2>map filetr</h2>
          </div>
      </div>

      <div class="map-search-results">
        <h2>map search</h2>
      </div>
  </div>

Answer 3

Answer №2

* {
  margin: 0;
  padding: 0;
}

.map-bg {
  background: url('https://www.example.com/image.jpg');
  background-size: cover;
  padding: 100px 20px;
}

.key-results {
  padding: 40px 20px;
}

@media screen and (max-width: 767px) {
  .map-bg {
    background: none !important;
    padding: 40px 20px !important;
  }

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="map-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12 col-lg-6 col-12">
          <p>
            What is Lorem Ipsum?
            <br>
            <br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
      </div>
    </div>
  </div>
</section>
<section class="key-results">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <p>
            What is Lorem Ipsum?
            <br>
            <br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
      </div>
    </div>
  </div>
</section>
</body>
</html>

If you need that map background on small devices just remove the media query.. Hope it'd help :)

Answer 4

* {
  margin: 0;
  padding: 0;
}

.map-bg {
  background: url('https://www.example.com/image.jpg');
  background-size: cover;
  padding: 100px 20px;
}

.key-results {
  padding: 40px 20px;
}

@media screen and (max-width: 767px) {
  .map-bg {
    background: none !important;
    padding: 40px 20px !important;
  }

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<section class="map-bg">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-sm-12 col-lg-6 col-12">
          <p>
            What is Lorem Ipsum?
            <br>
            <br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
      </div>
    </div>
  </div>
</section>
<section class="key-results">
  <div class="container">
    <div class="row">
      <div class="col-12">
          <p>
            What is Lorem Ipsum?
            <br>
            <br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
      </div>
    </div>
  </div>
</section>
</body>
</html>

If you need that map background on small devices just remove the media query.. Hope it'd help :)

Making absolute positioning responsive in Bootstrap 4 - a comprehensive guide

Answer №1

Answer №2

Similar questions

Creating a fixed sidebar on the left and right using Bootstrap 5

Adjust the Bootstrap flex settings to display only 3 cards instead of the default 4 cards - HTML

Click to switch divs

How can I position a Button at the center of my Grid item using Material UI?

Reduce the distance between child items when utilizing the display flex with the space-between property

What is the best way to make a span's background color stretch to 100% width?

What is the reason the default state of a checkbox does not show a background-color change, while the checked state does?

Exploring Bootstrap4: Interactive Checkboxes and Labels

Is there a way to dynamically assign the background color of a webpage based on the exact width and height of the user's screen?

My JavaScript code runs perfectly fine on JSFiddle, but for some reason, it's not functioning correctly on

Firebase hosting adjusts the transparency of an element to 1% whenever it detects the presence of CSS opacity

Media queries do not trigger the execution of CSS code

SB Admin 2 menu with multiple levels does not collapse as expected

Exploration of Non-height Divs

Is it possible to locate an element using two attributes in C# WebDriver?

The ellipsis text-overflow feature occasionally malfunctions during a single session when using IE 11

Tips for arranging images in a horizontal layout using FlatList in React Native

Two pictures, one adjusting in size and one staying the same size

Change the color of the Parent Menu when a childMenu is clicked on using CSS and HTML

Divided screen showcasing one movable panel