Search code examples
cssbuttontextalignmentcenter

Bootstrap 4 center items only on small viewport, but no alignment on every other size?

I'm new to Bootstrap so I'm not sure if this is possible, but I'm trying to make it so that a couple buttons and a tic tac toe board have no alignment (so just the way they are) on all viewport sizes, but once it hits small, they are centered.

I've tried to use text-center and text-sm-center but it does the opposite of what I want (apply to the smallest viewport and everything bigger, whereas I want it to apply to the smallest but nothing else). Is there a way to go about doing this? I've included screenshots of how I want it to look.

    <section class="container" id="game">
        <div class="row">
          <div class="col-12 col-md-6" id="tic">
            <canvas id="square1" width="100" height="100"></canvas>
            <canvas id="square2" width="100" height="100"></canvas>
            <canvas id="square3" width="100" height="100"></canvas><br />

            <canvas id="square4" width="100" height="100"></canvas>
            <canvas id="square5" width="100" height="100"></canvas>
            <canvas id="square6" width="100" height="100"></canvas><br />

            <canvas id="square7" width="100" height="100"></canvas>
            <canvas id="square8" width="100" height="100"></canvas>
            <canvas id="square9" width="100" height="100"></canvas>

          </div>
          <div class="col-md-6" id="rules">
            <h2>RULES</h2>
            /* list of rules */
          </div>
        </div>

        <div class="row">
            <div class="col-6">
                <button id="undo" type="button" class="btn btn-lg btn-warning">Undo Move</button>
            </div>  
            <div class="col-6">
                <button id="new" type="button" class="btn btn-lg btn-info">New Game</button>
            </div>
        </div>

This is how it looks with no alignment on a larger viewport enter image description here

but when it gets to the smallest viewport, I want the tic tac to board and two buttons to align

enter image description here

Solution

  • text-center means all text will be centered, text-sm-center will center the text on small viewpoint and above, try using text-center and then text-sm-left.

    This is because of that style of bootstrap class, same as col-md-12 etc work as a media query with a min-width, where everything that size and above gets assigned the css rule not that rule (breakpoint) only.