Organize the search bar and button over a background image using Bootstrap and CSS styling

Question

Organize the search bar and button over a background image using Bootstrap and CSS styling

I am facing a challenge in positioning the search bar on a background image, as well as placing a button at the bottom and center of the image. After that, I plan to include containers.

My Goal

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

However, I am struggling and feeling confused about the positioning. Additionally, the glyphicon is not working as expected.

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

Here is my Code

<style>
  .card {
    border: 0px solid;
  }
  
  .drop-shadow {
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
    border-radius: 0px;
  }
  
  .container-fluid {
    width: auto
  }
  
  .container-fluid.drop-shadow {
    margin-top: 2%;
    margin-left: 5%;
    margin-right: 5%
  }
  
  .img-fluid {
    height: 200px;
  }
  
  #child {
    width: 100%;
    height: 20px;
    margin: auto;
    text-align: center;
    bottom: 0px;
    position: absolute;
  }
  
  .btn-checkin {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    border-color: #EC008c;
    text-transform: uppercase;
    background-color: #EC008c;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    padding: 0.375rem .75rem;
    font-size: 13px;
    border-radius: .25rem;
  }
</style>

</head>

<body id="page-top">

  <div class="card">

    <img class="img-fluid" src="img/1847p.png" alt="Card image cap">

    <div class="col-md-5">
      <div class="form-group">
        <div class="icon-addon addon-lg">
          <input type="text" placeholder="Search Class" class="form-control" style="height:30px;position:absolute" id="email">
          <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
        </div>
      </div>
    </div>

    <div id="child">

      <button class="btn-checkin">Check in</button>

      <div class="container-fluid drop-shadow">
        <div class="row">
          frsjafksdalkdfsa
        </div>
        fsdfdasasd
      </div>

    </div>
  </div>

Challenges to Address:

Position the search bar on the background image
Ensure the background image always stays on top of the screen with full width and responsive height, instead of hard coding it to 200px
Troubleshoot the glyphicon display issue
Place the button at the bottom and center of the image

html css twitter-bootstrap bootstrap-4 responsive

Answer 1

Answer №1

To position the form on top of the image, use margin-top with a negative value.
The Glyphicons are working perfectly here.

* {
  box-sizing: border-box;
}

img {
  width: 100%;
}

div#form-box {
  margin-top: -95px;
  
  text-align: center;
}

div#input-group {
  width: 80%;
  
  margin: 0 auto 20px;
  
  position: relative;

  background-color: #fff;
  
  border: none;
  border-radius: 5px;
}


input#email, label[for="email"] {
  display:inline-block;
  vertical-align: middle;
}

input#email {
  width: calc(100% - 40px);
  
  padding: 10px;
  
  border: none;
}

label[for="email"] {
  width: 40px;
  
  line-height: 40px;
}

button#btn-checkin {
  display: inline-block;
  
  padding: 6px 10px;
  
  border: none;
  border-radius: 5px;
  background-color: #EC008c;
  color: #fff;
  
  text-align: center;
  text-transform: uppercase;
}

<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>

<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />

<div id="form-box">
  <form>
    <div id="input-group">
    <label for="email" class="glyphicon glyphicon-search"></label><!--
      --><input type="text" placeholder="Search Class" id="email">
    </div>
    <br/>
    <button id="btn-checkin">Check-in</button>
  </form>
</div>

<br/>
<br/>
<br/>

Answer 2

To position the form on top of the image, use margin-top with a negative value.
The Glyphicons are working perfectly here.

* {
  box-sizing: border-box;
}

img {
  width: 100%;
}

div#form-box {
  margin-top: -95px;
  
  text-align: center;
}

div#input-group {
  width: 80%;
  
  margin: 0 auto 20px;
  
  position: relative;

  background-color: #fff;
  
  border: none;
  border-radius: 5px;
}


input#email, label[for="email"] {
  display:inline-block;
  vertical-align: middle;
}

input#email {
  width: calc(100% - 40px);
  
  padding: 10px;
  
  border: none;
}

label[for="email"] {
  width: 40px;
  
  line-height: 40px;
}

button#btn-checkin {
  display: inline-block;
  
  padding: 6px 10px;
  
  border: none;
  border-radius: 5px;
  background-color: #EC008c;
  color: #fff;
  
  text-align: center;
  text-transform: uppercase;
}

<head>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" />
</head>

<img src="http://wonderfulengineering.com/wp-content/uploads/2016/01/Desktop-Wallpaper-4.jpg" />

<div id="form-box">
  <form>
    <div id="input-group">
    <label for="email" class="glyphicon glyphicon-search"></label><!--
      --><input type="text" placeholder="Search Class" id="email">
    </div>
    <br/>
    <button id="btn-checkin">Check-in</button>
  </form>
</div>

<br/>
<br/>
<br/>

Answer 3

Answer №2

    .card{
            border:0px solid;
            position:relative;
            height:200px;
            background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
            background-size:cover;
        }
        
        .card img {
          width:100%;
        }
        
        .search-box {
          position : absolute;
          display:inline-block;
          bottom:-30px;
          left:0;
          right:0;
          padding:15px;
          text-align:center;
        }
    
        .drop-shadow {
            -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
            box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
            border-radius:0px;
        }
        .container-fluid{
            width:auto
        }
        .container-fluid.drop-shadow {
            margin-top:2%;
            margin-left:5%;
            margin-right:5%
    
        }
    
        .img-fluid {
            height: 200px;
        }
    
        #child{
                width:100%;
                height: 20px;
                margin: auto;
                text-align: center;
                margin-top: 40px;
        }
        .form-group {
          width:100%;
          margin-bottom:10px;
        }
        .btn-checkin{
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            color: #fff;
            border-color: #EC008c;
            text-transform: uppercase;
            background-color: #EC008c;
            font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
            padding: 0.375rem .75rem;
            font-size: 13px;
            border-radius: .25rem;
    }
    
    .icon-addon {
      position:relative;
    }
    .icon-addon label {
        position: absolute;
        left: 2px;
        top: 2px;
        padding: 8px;
        font-size: 20px;
    }
    .icon-addon input {
        height:40px;
        padding-left:35px;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
    <body id="page-top">
    
    <div class="card" >
        <!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
        <div class="search-box">
            <div class="form-group">
                <div class="icon-addon addon-lg">
                    <input type="text" placeholder="Search Class" class="form-control" id="email">
                    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
                </div>
            </div>
            <button class="btn-checkin">Check in</button>
        </div>
    </div>
    <div id="child">
      <div class="container-fluid drop-shadow">
        <div class="row">
          frsjafksdalkdfsa
        </div>
        fsdfdasasd
      </div>
    </div>

Give this code a try. Feel free to reach out if you need further assistance.

Answer 4

    .card{
            border:0px solid;
            position:relative;
            height:200px;
            background:url('https://preview.ibb.co/fex0wK/1847p.png') no-repeat top center;
            background-size:cover;
        }
        
        .card img {
          width:100%;
        }
        
        .search-box {
          position : absolute;
          display:inline-block;
          bottom:-30px;
          left:0;
          right:0;
          padding:15px;
          text-align:center;
        }
    
        .drop-shadow {
            -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
            box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
            border-radius:0px;
        }
        .container-fluid{
            width:auto
        }
        .container-fluid.drop-shadow {
            margin-top:2%;
            margin-left:5%;
            margin-right:5%
    
        }
    
        .img-fluid {
            height: 200px;
        }
    
        #child{
                width:100%;
                height: 20px;
                margin: auto;
                text-align: center;
                margin-top: 40px;
        }
        .form-group {
          width:100%;
          margin-bottom:10px;
        }
        .btn-checkin{
            display: inline-block;
            text-align: center;
            white-space: nowrap;
            color: #fff;
            border-color: #EC008c;
            text-transform: uppercase;
            background-color: #EC008c;
            font-family:'Open Sans','Helvetica Neue',Arial,sans-serif;
            padding: 0.375rem .75rem;
            font-size: 13px;
            border-radius: .25rem;
    }
    
    .icon-addon {
      position:relative;
    }
    .icon-addon label {
        position: absolute;
        left: 2px;
        top: 2px;
        padding: 8px;
        font-size: 20px;
    }
    .icon-addon input {
        height:40px;
        padding-left:35px;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    
    <body id="page-top">
    
    <div class="card" >
        <!-- <img class="img-fluid" src="img/1847p.png" alt="Card image cap"> -->
        <div class="search-box">
            <div class="form-group">
                <div class="icon-addon addon-lg">
                    <input type="text" placeholder="Search Class" class="form-control" id="email">
                    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
                </div>
            </div>
            <button class="btn-checkin">Check in</button>
        </div>
    </div>
    <div id="child">
      <div class="container-fluid drop-shadow">
        <div class="row">
          frsjafksdalkdfsa
        </div>
        fsdfdasasd
      </div>
    </div>

Give this code a try. Feel free to reach out if you need further assistance.

Answer 5

Answer №3

So you're looking to place the search bar within an image.

Start by creating a div with the image set as the background

   background: image_source;
   background-size: contain;
   position: relative; //this is necessary
   width: 100%;
   height: 100px; //adjust as needed

Next, style the search bar with CSS

   position: absolute;

Use properties like top, left, etc. to position the search bar accordingly

Answer 6

So you're looking to place the search bar within an image.

Start by creating a div with the image set as the background

   background: image_source;
   background-size: contain;
   position: relative; //this is necessary
   width: 100%;
   height: 100px; //adjust as needed

Next, style the search bar with CSS

   position: absolute;

Use properties like top, left, etc. to position the search bar accordingly

Organize the search bar and button over a background image using Bootstrap and CSS styling

Answer №1

Answer №2

Answer №3

Similar questions

The Bootstrap select feature does not override the original dropdown menu; instead, it adds its own functionality alongside it

Choosing only those elements that are not children of parents with a specific class by utilizing the `.not()` method

Rebel Spirit on a Wordpress Platform

Concealing and revealing information with jQuery and AJAX

Is there a way to eliminate the CSS width and height properties and instead establish a custom max-width for an image tag?

Steps to eliminate validation following the clearing of input fields

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

Eliminate any empty spaces between the HTML tags

Steps for executing a function when a directory is clicked

Is there a way to position headline text behind another headline? Take a look at the image provided for reference

Dynamically getting HTML and appending it to the body in AngularJS with MVC, allows for seamless binding to a

AngularJS ng-repeat nested loop allows you to iterate through an array

Conditionals in Angular 2 using Sass

jQuery SlideDown Navigation

Tips for properly aligning an image within an owl carousel

Flexbox ancestor causing Bootstrap 5 Carousel width to double

Struggle for dominance between Bootstrap carousel and Flexslider

Anchor tag remains in fixed location in HTML

Looking to position the Secondary Navigation Bar on squarespace at the bottom of the page, distinct from the primary Navigation Bar

Show data in a popup using jQuery DataTables and loading content asynchronously via Ajax