Bootstrap button not displaying inline with container element

Question

I'm creating a simple banner for a website using Bootstrap CSS and after centering text within the banner, I would like a button to be displayed inline with it. However, after I create the button, it does not display inline with the centered text within the button.

HTML:

<div id="idea_banner">  
    <div class="container">
        <b>Got an idea? Tell us about it!</b>
        <a href="#" class="btn btn-success btn-large">Give us an idea</a>

    </div>  
</div>

CSS:

#idea_banner {
  background: #4B91FB;
  overflow:hidden;
  width:100%;
  height:90px;
}

.container {
  position:relative;
}

.container b {
  display:block;
  text-align:center;
  margin-right:100px;
  margin-top:35px;
  color:#FFF;
  font-size:22px;
  white-space:nowrap;
}

.container a {
  display:inline-block;
  float:left;
}

I'm not really sure if this is a Bootstrap issue or not. Any help is greatly appreciated!

@RahulDesai I'm actually using a Bootstrap button as in the '<a>' class "btn btn-success btn-large" — Jeff P.
– Jeff P., Commented Dec 12, 2014 at 4:41
Please find the answer below and mark it as accepted if it solves your question. — Rahul Desai
– Rahul Desai, Commented Dec 12, 2014 at 4:52

Rahul Desai · Accepted Answer · 2014-12-12 04:48:25Z

1

It was happening because you had displayed b as block in your CSS. Change it to inline to get it into a single line.

Also, remove float: left for .container a and add text-align: center for .container.

By the way, <b> tag is not recommended. If you need an element to wrap the text, use <p> instead.

Working Code Snippet:

#idea_banner {
  background: #4B91FB;
  overflow:hidden;
  width:100%;
  height:90px;
}

.container {
  position:relative;
    text-align: center;
}

.container b {
  display: inline;
  text-align:center;
  margin-right:10px;
  margin-top:35px;
  color:#FFF;
  font-size:22px;
  white-space:nowrap;
}

.container a {
  display:inline;
  /*float:left;*/
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">


<div id="idea_banner">  
    <div class="container">
        <b>Got an idea? Tell us about it!</b>
        <a href="#" class="btn btn-success btn-large">Give us an idea</a>

    </div>  
</div>

answered Dec 12, 2014 at 4:48

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jeff P. Over a year ago

This is perfect! I knew it had something to do with the 'display' property and the wrapping. Thank you so much!

Jeff P. Over a year ago

@RahusDesai Only 1 minor detail I noticed where the 'margin-top' property isn't actually pushing the 'b' tag isn't actually floating from the top.

Jeff P. Over a year ago

I actually did some research and found that using 'top' instead of 'margin-top' and adding 'position:relative' will actually fix this problem. Anyways, thank you for your solution.

Rahul Desai Over a year ago

@JeffP. That would be another question on StackOverflow. Please post it and link me to it. :)

Jeff P. Over a year ago

Found it, see my answer above. Thank you!

Collectives™ on Stack Overflow

Bootstrap button not displaying inline with container element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related