Centering a Twitter Bootstrap button

2020-06-06 17:45发布

I'm making a form with Twitter Bootstrap, and am having a really difficult time centering the button. It's contained inside a div with a span of 7. Below is the HTML, and the button is at the very bottom. Any recommendations on how to center this thing?

<div class="form span7">
  <div id="get-started">
    <div id="form-intro">
      <strong><h1>1. Get Started: Some basics</h1></strong>
    </div>
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
          <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
          <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
          <select class="span4" id="categoryselect">
            <!-- Add some CSS and JS to make a placeholder value-->
            <option value="Kittens">Kittens</option>
            <option value="Keyboard Cat">Keyboard Cat</option>
            <option value="Twitter Bird">Twitter Bird</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="imageselect">Choose an image</label>
        <div class="controls span4">
          <img src="piggyimage.png" id="imageselect" alt="image-select" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
          <input type="text" class="span4" id="goal" placeholder="$1337">
        </div>
      </div>
      <button class="btn btn-large btn-primary" type="button">Submit</button>
    </form>
  </div>
</div>

8条回答
贪生不怕死
2楼-- · 2020-06-06 18:08

Bootstrap have a specific class for this: center-block

<button type="button" class="your_class center-block"> Book </button>
查看更多
仙女界的扛把子
3楼-- · 2020-06-06 18:10

Bootstrap has it's own centering class named text-center.

<div class="span7 text-center"></div>

查看更多
登录 后发表回答