How to Align Content in a Bootstrap 4 Container

Question

How to Align Content in a Bootstrap 4 Container

After spending the last couple of hours experimenting with different combinations, I am still unable to get this simple aspect right. I am working with Bootstrap 4 and struggling to align an image and login dialog below it.https://i.sstatic.net/spZOM.png

I tried using the basic boilerplate code from Bootstrap 4 and attempted alignment using

https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment without success. Can someone please help me identify what I'm missing?

Below is my HTML file.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/custom.css">

    <title>Hey - A group chat messenger!</title>
  </head>
  <body>
        <div class="container-fluid">
            <div class="row justify-content-center">
                    <div class="col-4">
                        <img src="hey_logo.png" id="logo" class="img-fluid">
                    </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-4">
                    <button type="submit" class="btn btn-primary">Login with Google</button>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-4">
                    <small id="subtextMessage" class="form-text text-muted">Say Hey! to new beginnings</small>                    
                </div>
            </div>
        </div>


    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89f9e6f9f9ecfba7e3fac9b8a7b8bfa7b9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
    </script>

</body>
</html>

Thank you, Pavan.

css bootstrap-4

Answer 1

Answer №1

To tackle the issue mentioned above, a practical solution involves creating distinct rows with centered content for each element (such as image, button, text) within a column.

Check out the effective code snippet below:

<!doctype html>
<html lang="en">
  <head>
    <!-- Essential meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/custom.css">

    <title>Greetings - A social network platform!</title>
  </head>
  <body>
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-sm-3">
                    <div class="row justify-content-md-center">
                        <img src="/greetings-logo.png" id="logo" class="img-fluid">
                    </div>
                    <div class="row justify-content-md-center">
                        <button type="submit" class="btn btn-primary">Join with Facebook</button>
                    </div>                        
                    <div class="row justify-content-md-center">
                        <small id="subtextMessage" class="form-text text-muted">Spread Smiles Everyday!</small>                    
                    </div>                        
                </div>
            </div>
        </div>

    <!-- Scripts: jQuery, Popper.js, Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92c2ddd2d2c7d0eed733a510bfbdb0bda5bb">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
    </script>

</body>
</html>

Here's the resulting display:

https://i.sstatic.net/xyz123.png

Answer 2

To tackle the issue mentioned above, a practical solution involves creating distinct rows with centered content for each element (such as image, button, text) within a column.

Check out the effective code snippet below:

<!doctype html>
<html lang="en">
  <head>
    <!-- Essential meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/custom.css">

    <title>Greetings - A social network platform!</title>
  </head>
  <body>
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-sm-3">
                    <div class="row justify-content-md-center">
                        <img src="/greetings-logo.png" id="logo" class="img-fluid">
                    </div>
                    <div class="row justify-content-md-center">
                        <button type="submit" class="btn btn-primary">Join with Facebook</button>
                    </div>                        
                    <div class="row justify-content-md-center">
                        <small id="subtextMessage" class="form-text text-muted">Spread Smiles Everyday!</small>                    
                    </div>                        
                </div>
            </div>
        </div>

    <!-- Scripts: jQuery, Popper.js, Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92c2ddd2d2c7d0eed733a510bfbdb0bda5bb">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>    
    </script>

</body>
</html>

Here's the resulting display:

https://i.sstatic.net/xyz123.png

Answer 3

Answer №2

In Bootstrap, a button is considered an inline-block element. To center the text within the button, you can use the text-center class.

<div class="row">
  <div class="col-4 text-center">
    <button type="submit" class="btn btn-primary">Login with Google</button>
  </div>
</div>

If the alignment does not look right (such as if the image is not symmetrical), consider adding padding to the left or right side of the col-4 element.

Answer 4

In Bootstrap, a button is considered an inline-block element. To center the text within the button, you can use the text-center class.

<div class="row">
  <div class="col-4 text-center">
    <button type="submit" class="btn btn-primary">Login with Google</button>
  </div>
</div>

If the alignment does not look right (such as if the image is not symmetrical), consider adding padding to the left or right side of the col-4 element.

How to Align Content in a Bootstrap 4 Container

Answer №1

Answer №2

Similar questions

Animate horizontal scrolling with jQuery when the user scrolls the mouse

Is it possible to modify the font size of all text that shares a particular font size?

Webpack Encore: SCSS import order causing unexpected issues

How do I make the YouTube Grid Gallery player show up in a pop-up window?

css: labeling printed pages in Chrome

Tablet-friendly dropdown menu

Flexbox wrap allows you to determine which child element will move to the next line

Trouble with applying the CSS property filter: invert(80%) on Internet Explorer due to compatibility

Is there a way to adjust the positioning of this dialog element?

How to incorporate Django syntax into CSS styling

Images not showing in Vue.js

Issues with Hamburger menu hover effect in CSS

"Reduce the height of the navigation bar when the user scrolls down the webpage

Booking form pop-up appearing beneath the section

Creating a versatile button that adjusts seamlessly across different screen sizes, from smartphones to larger

The arrangement of elements in an inline-block is determined by the width of the section

Multiline text that appears inline

Colorful background visuals without any text

Can anyone suggest a way to change the orientation of mapped items from column to row?

Tips for repositioning the navbar toggle button and logo to the left using Bootstrap