How do I move an element to the middle of a bootstrap row?

Question

How do I move an element to the middle of a bootstrap row?

4.9k views Asked by Tim At 19 November 2024 at 23:18

With my current code, the "test" paragraph is spanning the entire page. I would like the width to wrap the text, (width:auto), however that's not working. This element is meant to be a button in the center of the page. I'm using the Bootstrap 3.0 Grid system, by the way.

HTML:

<body>
<div class="container-fluid" id="FullContainer">
    <!-- Cover Page -->
    <div class="row" id="CoverPageRow"> 
        <div class="col-xs-12", id="HeaderText"> Mastery Wireframe </div>
        <div class="col-xs-12", id="SubHeaderText"> Become a master at what you do. </div>
        <div class="col-xs-12", id="DiscoverMoreButton"> <p id="test"> Discover More </p></div>
    </div>
</div>
</body>

CSS:

.col-md-12 {
    height: auto;
    color: white;
    text-align: center;
    font-size: 200%;
}

#test {
    background-color: blue;
    border: 1px white solid;
    width: auto;
}

So how do I get the width to set to auto, so that this button doesn't span the entire page?

Original Q&A

There are 3 answers

**stevec** · Answer 1 · 2021-01-09T09:56:54+00:00

stevec On 09 January 2021 at 09:56

The really quick answer is use .text-center

Example:

<div class="row text-center">
  <div class="col">
    <p>Some centered content here</p>
  </div>
</div>

**davidpauljunior** · Answer 2 · 2014-03-18T00:19:42+00:00

<p> tags are block level by default. If you make it inline-block and then set it's parent to text-align: center it should work. Note that you won't need width: auto.

#DiscoverMoreButton {
  text-align: center;
}

#test {
  background-color: blue;
  border: 1px white solid;
  display: inline-block;
}

Demo

Note that col-xs-12 means be 100% wide. As such, it's not really needed here as <div> is 100% wide by default.

So you could slim everything down, and use some of Bootstraps helper and button classes to center and style the btn (.text-center and btn btn-primary).

<div class="container-fluid" id="FullContainer">
  <!-- Cover Page -->
  <div id="CoverPageRow"> 
    <div id="HeaderText">Mastery Wireframe</div>
      <div id="SubHeaderText">Become a master at what you do.</div>
      <div class="text-center">
        <a href="#" class="btn btn-primary">Discover more</a>
      </div>
  </div>
</div>

Demo 2

**WillardSolutions** · Answer 3 · 2014-03-18T00:21:15+00:00

Probably a better idea to remove the paragraph tag and use an offset class to center your button. See docs here: http://getbootstrap.com/css/

<div class="col-xs-4 col-xs-offset-4">Button text here</div>

Also, any reason why you're not using the btn classes for buttons instead?

TechQA.

How do I move an element to the middle of a bootstrap row?

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Popular Questions

Popular Tags

Trending Questions