CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dg-
dg-

Reputation: 105

Centering bootstrap wells with horizontal alignment

I'm using bootstrap wells to make a type of card display that needs to go from the left to the right (horizontal), but for some reason the wells only want to be aligned vertically.

body {
  background-color: #5C67B6;
}

html,
body {
  height: 100%;
  padding-top: 70px;
}

.btn-purple {
  color: #fff;
  background-color: #5C67B6;
  border-color: #5C67B6;
  /*set the color you want here*/
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
  color: #fff;
  background-color: #4b5496;
  border-color: #4b5496;
  /*set the color you want here*/
}

.container {
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container content-sm">
    <div class="row">
      <div class="col-md-4 col-sm-8">
        <div class="well">
          <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Test!</h3>
          <p>The quick brown fox jumped over the lazy brown dog</p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
        </div>
        <div class="well">
          <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Test!</h3>
          <p>The quick brown fox jumped over the lazy brown dog</p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
        </div>
        <div class="well">
          <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
          <h3 style="text-align: center;">Test!</h3>
          <p>The quick brown fox jumped over the lazy brown dog</p>
          <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
        </div>
      </div>
    </div>
  </div>
</body>

If you check the snippet, you'll see that it's all being positioned vertically after each individual well is placed in. I'm using inline-block for the container and have tried using it for the well with no luck. How can I make it align horizontally?

Upvotes: 0

Views: 211

Answers (1)

Nieminen
Nieminen

Reputation: 1284

First easy option is to just use cols inside your main col, where each well is a .col-md-6 .col-xs-12 or something like that.

the snippets below should do what I think you're describing.

body {
  background-color: #5C67B6;
}

html,
body {
  height: 100%;
  padding-top: 70px;
}

.btn-purple {
  color: #fff;
  background-color: #5C67B6;
  border-color: #5C67B6;
  /*set the color you want here*/
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
  color: #fff;
  background-color: #4b5496;
  border-color: #4b5496;
  /*set the color you want here*/
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
<div class="container content-sm">
    <div class="row">
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
        <div class="col-sm-6 col-xs-12">
            <div class="well">
                <img class="center-block" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9f/Twitter_bird_logo_2012.svg/1259px-Twitter_bird_logo_2012.svg.png" style="border-radius: 50%;" height="80" width="80">
                <h3 style="text-align: center;">Test!</h3>
                <p>The quick brown fox jumped over the lazy brown dog</p>
                <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
            </div>
        </div>
    </div>
</div>
</body>

Upvotes: 1

Related Questions