Twitter Bootstrap Question posted in

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

Tags:

2

Answers


  1. 0

    Add/Remove padding from jumbotron to position vertically

    div.jumbotron{
  padding-top:60px;
  }
    <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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search