title: align transparent div over carousel background image in bootstrap
body: <p>i am trying to place a transparent div over a background image. over this transparent div there is blue color div which has drop down list and icons right aligned and some caption. it's been a day and i tried different method to achieve this by giving background image to a container, using <code>jumbotron</code>, <strong>finally</strong>  trying <code>carousel</code>, i want to align the contents  now,</p>
  
  <p><strong>current look:</strong>
  <img src="https://i.stack.imgur.com/ec9Sz.jpg" alt="enter image description here"></p>
  
  <p><strong>my page:</strong> </p>
  
  <pre><code>&lt;div class="container"&gt;
  
  // some code for nav bar and logo etc       
  
  &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
  
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;img src="~/img/backimage.jpg" alt="Chania"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;div class="row" id="ddselect"&gt;
                          &lt;div class="col-md-6"&gt;
                              &lt;select name="connames"&gt;
                                  &lt;option value="America"&gt;America&lt;/option&gt;
                                  &lt;option value="UK"&gt;UK&lt;/option&gt;
                                  &lt;option value="China"&gt;China&lt;/option&gt;
                                  &lt;option value="India"&gt;India&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;    
  
      &lt;/div&gt;    
  &lt;/div&gt;
  
  
  
  &lt;div&gt;
  </code></pre>
  
  <p><strong>custom css:</strong></p>
  
  <pre><code>.carousel .carousel-inner .item .container .carousel-caption #ddselect, .carousel .carousel-inner .item .container .carousel-caption  #ddselect{  
   background-color:#fff;  
   opacity: 0.7;  
   border: 2px solid;  
      border-radius: 5px;  
      padding-right: 800px;
  
  padding-bottom: 250px;
  }
  </code></pre>
  
  <p><strong>expected output:</strong></p>
  
  <p>you can see complete view in <code>imageur</code> <a href="https://i.imgur.com/hf4mulJ.jpg?1" rel="nofollow noreferrer">here</a></p>
  
  <p>i am just learning how to do custom alignment in bootstrap. any help would be great.</p>