CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Human Cyborg Relations
Human Cyborg Relations

Reputation: 1244

Row elements won't align

I'm using bootstrap and I'm trying to align the stuff inside my row. I realize that I haven't used up all the column space, and that's fine. I just want the stuff centered. 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<style>
    #headings {
        text-align: center;
    }

    #row-container {
        text-align: center;
    }

    #take-from-break, #take-from-session {
        float: right;
    }

</style>

<html>
    <div class="container-fluid">
        <div class="container">
            <div id="headings">
                <h1>Pomodoro Clock</h1>
                <h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
            </div>
            <div id="setup">
                <div id="row-container">
                    Enter time in minutes
                    <div class="row">
                        <div class="col-md-1"><button id="take-from-break">-</button></div>
                        <div class="col-md-2"><input type="number" placeholder="Break Length"></div>
                        <div class="col-md-1"><button id="add-to-break">+</button></div>
                        <div class="col-md-2"></div> <!-- blank space -->
                        <div class="col-md-1"><button id="take-from-session">-</button></div>
                        <div class="col-md-2"><input type="number" placeholder="Session Length"></div>
                        <div class="col-md-1"><button id="add-to-session">+</button></div>
                    </div>
                </div>
            </div>
            <div id="clock-holder">
                <button id="clock"></button>
            </div>
        </div>
    </div>
</html>

Here is the JSFiddle: https://jsfiddle.net/c8wLxkob/

And here is the image of the page that I get:

Result

Upvotes: 4

Views: 325

Answers (1)

Maximillian Laumeister
Maximillian Laumeister

Reputation: 20359

Since it doesn't look like you're using Bootstrap to size your columns in particular, one way to center-align your boxes is to use display: flex along with justify-content: center. I've retained the Bootstrap sizing in the spacer, so the result is still responsive.

Screenshot of result:

Screenshot of result

Here is a demo to show what I mean:

    #headings {
        text-align: center;
    }
    
    #row-container {
        text-align: center;
    }
    
    .wrap {
      display: flex;
      justify-content: center;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container-fluid">
        <div class="container">
            <div id="headings">
                <h1>Pomodoro Clock</h1>
                <h3>A Pomodoro Clock helps you break down work into intervals, separated by short breaks.</h3>
            </div>
            <div id="setup">
                <div id="row-container">
                    Enter time in minutes
                    <div class="wrap">
                      <div class="center-wrap">
                          <button id="take-from-break">-</button>
                          <input type="number" placeholder="Break Length">
                          <button id="add-to-break">+</button>
                      </div>
                      <div class="col-md-2"></div>
                      <div class="center-wrap">
                          <button id="take-from-session">-</button>
                          <input type="number" placeholder="Session Length">
                          <button id="add-to-session">+</button>
                       </div>
                    </div>
                </div>
            </div>
            <div id="clock-holder">
                <button id="clock"></button>
            </div>
        </div>
    </div>

JSFiddle Version: https://jsfiddle.net/re8jzxer/

Upvotes: 1

Related Questions