Muhammad Usman Muhammad Usman - 20 days ago 5
CSS Question

How to postion the text in Jumbotron-Twitter Bootstrap

I can't position my text on

top
in
jumbotron
.

Here is my Code,



<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="jumbotron" style="text-align:center; background-image: url(img/propdev.jpg); background-size: cover; height: 30%;">
<div class="container">
<h2 id="prop_dev"> Are You a Property Developer?</h2>
<div id="raise" class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-primary">Raise Funding</button>
</div>
</div>
</div>





Here is the output,
Output

I need to make the text and button on top of the image

Answer

I added padding-top:0px to your inline style to the div which you gave the class "jumbotron"

Now the distance that it has from the top is the padding of the class container, which is within the jumbotron. If you want to remove that too, add the padding-top:0px; to that too.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="jumbotron" style="text-align:center; background-image: url(img/propdev.jpg); background-size: cover; height: 30%; padding-top:0px;">
  <div class="container" style="margin-top:0px !important;">
    <h2 id="prop_dev"> Are You a  Property Developer?</h2>
    <div id="raise" class="btn-group btn-group-lg" role="group">
      <button type="button" class="btn btn-primary">Raise Funding</button>
    </div>
  </div>
</div>