Geek Answers Handbook

Line items will not align

I am using bootstrap and I am trying to align the contents inside my line. I understand that I have not used all the column space, and that is fine. I just want the material to be focused.

    <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 I get:

Result

+4
source share
1 answer

, Bootstrap , display: flex justify-content: center. Bootstrap , .

:

Result Screenshot

, , :

    #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>
Hide result

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

+1

More articles:


All Articles