How do I center align text in bootstrap container?

Question

I'm a beginner learning to code with bootstrap. Everything I add after adding the jumbotron component seems to align itself to the left and stick to it. I have tried .text-center and also custom styling with CSS "text-align: center;" and "margin:0 auto;"

I'm new here and hope this is the right way to show my code but here's my code:

<head>

    <title>MyApp</title>

    <link rel="stylesheet" 
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
    crossorigin="anonymous">

    <style type="text/css">
        .navbar-brand       {
                            margin-right:10px;
                            position:relative;
                            top:2px;
                            }
        .jumbotron          {
                            margin-top:50px;
                            background-image: URL(BG.jpg);
                            background-size: 100% 100%;
                            text-align:center;
                            color: white;
                            }
        .input-group        {
                            width:350px;
                            }
        #formAlign          {
                            text-align:center;
                            width:350px;
                            margin:0 auto;
                            margin-top:30px;
                            }
        #appsum             {
                            text-align:center;
                            }

    </style>

</head>

<body>

    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">

        <a class="navbar-brand" href="#">
            <img src="logo.png" width="100" height="30" alt="">
        </a>

                <ul class="navbar-nav mr-auto">

                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Download The App</a>
                    </li>

                </ul>

                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" type="email" placeholder="Email" aria-label="Search">
                    <input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Search">
                    <button class="btn btn-info my-2 my-sm-0" type="submit">Login</button>
                </form>
    </nav>

    <div class="jumbotron">
        <h1 class="display-4">My Awesome App</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>

            <div id="formAlign">
                <div class="form-horizontal">

                    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>

                    <div class="input-group mb-0 mr-sm-2">
                        <div class="input-group-prepend">
                            <div class="input-group-text">@</div>
                        </div>

                        <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">

                        <a class="btn btn-primary btn-md ml-2" href="#" role="button">Sign Up</a>
                    </div>

                </div>
            </div>
    </div>

    <div class="container" id="appsum">

        <div class="row">
            <h1>Why this is so awesome.</h1>        
        </div>
        <div class="row">
            <p class="lead">Summary, once again, of your app's awesomeness</p>          
        </div>

    </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
            crossorigin="anonymous">
        </script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
            crossorigin="anonymous">
        </script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
            integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
            crossorigin="anonymous">
        </script>

</body>

score 0 · Accepted Answer · answered Sep 06 '18 at 00:43

The Bootstrap grid format requires that each .row div contain only .col or .col-* divs as immediate children. It looks like your divs nested inside your rows are not in cols.

Try this:

<div class="container" id="appsum">

    <div class="row">
        <div class="col">
            <h1>Why this is so awesome.</h1>
        </div>        
    </div>
    <div class="row">
        <div class="col">
            <p class="lead">Summary, once again, of your app's awesomeness</p>  
        </div>        
    </div>

</div>

Of course, you can set column widths or breakpoints by using col-* classes (where * is a number between 1 and 12 or a breakpoint size) instead.

Check out the Bootstrap 4 grid layout documentation here: https://getbootstrap.com/docs/4.0/layout/grid/

How do I center align text in bootstrap container?

1 Answers1