How to center all content of a div - Bootstrap

Asked

Viewed 56,156 times

7

Hello. I am learning how to use the bootstrap. In my studies I had a question. If there’s any way to centralize the entire contents of a div. I have sample codes...

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="container">
            <h1>Bootstrap <small>Meu primeiro site</small></h1>
            <p>Usando o bootstrap</p>
        </div>
    <div class="container" id="homer">
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
    </div>
    <div class="container" id="planos">
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black">
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
        </div>
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black">
            <h3>Nossos Planos</h3>
            <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button class="btn btn-primary">Lorem Ipsum</button>
            </div>
            <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button class="btn btn-primary">Lorem Ipsum</button>
            </div>
            <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button class="btn btn-primary">Lorem Ipsum</button>
            </div>
        </div>
    </div>
</div>

In id="plans" I have three buttons, I want them one below the other, inside the same Row, until ai blz. But I wanted to focus on those buttons... The text "Our Plans" I can center with "text-align", but it would have a way for me to center the buttons or any other content of a div?

from now on!

html css twitter-bootstrap div button

2 answers

9

  • 1

    A hint, a . ROW is already flex, no need to put the class d-flex in it.

6


Try this 

          <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">
                <button class="btn btn-primary" align="center">Lorem Ipsum</button>
            </div>

  • 1

    Add the aling="center" where you want to center, maybe you confused and were writing wrong.

  • It worked. Thank you so much for your help man!

  • another tip, when you use the style="background-color:" you can add colors with the grid # or things like border-radius:25px within the style=" " to style buttons without using class or opening a css

Browser other questions tagged html css twitter-bootstrap div button

You are not signed in. Login or sign up in order to post.