How to center a div in Bootstrap 4?

Hello!

I am developing a “one-page website”. As you can see on the picture bellow, the first two div is centered and the third one is not. The strange thing is that I am using pretty much the same code on the last two but different results are generated, I am using Flexbox. The last div will be applied dynamically, it’s important that the div is aligning correctly every time. How do I improve the code to get this result?

There is also, some other minor issues I need help with:
-How do I change the width of a button group?
-The space between the button group and the single button is larger on the second div (which is a form group). How do I get exactly the same width on the third one?

html code, third div

<div id="addQuestion">
    <div class="col-sm-10 form-group-lg">
        <form class="form-group">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn btn-success active">
                    <input type="radio" autocomplete="off" checked> Add question
                </label>
                <label class="btn btn-success">
                    <input type="radio" name="options" id="inlineRadio1" value="openQuestionModule()"
                           autocomplete="off">Question with a open answer </label>
                <label class="btn btn-success">
                    <input type="radio" name="options" id="inlineRadio2" value="singleQuestionModule()"
                           autocomplete="off">
                    Question with only one right answer
                </label>
            </div>
        </form>
        <button class="btn btn-outline-success" id="saveTestBtn" onclick="saveTest()" type="submit">
            Save Test
        </button>
    </div>
</div>

CSS, third div

#addQuestion{
    background-color: #C5C9B8;
    width: 100%;
    color: #333333;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0;
    align-items: center;
    justify-content: space-around;
    display: flex;
    float: none;
}

Thank you!

Hi joseflundstrom, welcome to the forum!

I think it would be helpful to see all code the screenshot represent.

The other minor issues would also be easier to explain relative the code you have.

Please post again with all code for the page. :slight_smile:

The third div is centred but you have a class of col-sm-10 on it making it 83.33% wide and thus it appears not to be centred.

Remove the class col-sm-10 and the element will center.

Try not to mix the bootstrap grid classes when creating your own structures as they will conflict unless you understand the grid properly. Refer to the bootstrap documentation for the grid structure and how you must use the classes for the columns rows and containers etc.

If you want all buttons the same width then you can use the’ btn-group-justified’ class as mentioned in the documentation.

You ,lost me :slight_smile: Did you mean vertical margins?

Hello! Thank you for your help! Yes, I mean the vertical margin. The second div (which is a form) has a nice margin between the text field and the submit button. I tried to make a similar margin in the third div, between the button group and the, save test button. I tried to accomplish this by placing the button group in a form but apparently, it didn’t work as intended. How do I do that?

I removed col-sm-10 but it didn’t get centered. I will post the rest of the code for that part of the page, then it will be easier to see if there is something else that isn’t right!

Columns need to be surrounded by Rows. You should apply the centering to the Row. Apply the class .align-items-center for vertical or .justify-content-center for horizontal.

See:

update 04.30.2018: https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment

https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment

<div class="row align-items-center justify-content-center">
    <div class="col">This will be centered vertically and horizontally</div>
</div>

It kind of sounds like you’re trying to make an inline form.

See:

update 04.30.2018: https://getbootstrap.com/docs/4.0/components/forms/#inline-forms

https://v4-alpha.getbootstrap.com/components/forms/#inline-forms

It seems that I am not able to edit the post, because of this I will post it here:

This Div looks like intended:

<div id="tCreateTest">
    <div class="createTestContainer">
        <h2>Create</h2>
        <h1 id="testH1">Test</h1>
        <div class="text-left">
            <div class="col-sm-10 form-group-lg">
                <div id="testDetails">
                    <form class="form-group">
                        <label id="titelLabel" class="form-control-label" for="lgFormGroupInput">Enter title:</label>
                        <input type="text" class="form-control form-control-lg" id="lgFormGroupInput"
                               placeholder="title">
                                     </form>
                    <button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

This div does not:

<div id="addQuestion">
    <div class="row align-items-center justify-content-center">
            <div class="btn-group" data-toggle="buttons">
                <label class="btn btn btn-success active">
                    <input type="radio" autocomplete="off" checked> Add question
                </label>
                <label class="btn btn-success">
                    <input type="radio" name="options" id="inlineRadio1" value="openQuestionModule()"
                           autocomplete="off">
                    Question with a open answer
                </label>
                <label class="btn btn-success">
                    <input type="radio" name="options" id="inlineRadio2" value="singleQuestionModule()"
                           autocomplete="off">
                    Question with only one right answer
                </label>
            </div>
    </div>
    <div class="row justify-content-around">
        <div class="col-4">
        <button class="btn btn-outline-success" id="saveTestBtn" onclick="saveTest()" type="submit">
            Save Test
        </button>
        </div>
</div>>

The CSS of the good div:


#tCreateTest {
    background-color: #C5C9B8;
    width: 100%;
    color: #333333;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
    align-items: center;
    justify-content: space-around;
    display: flex;
    float: none;
}
#submitTitle{

    align-items: center;
    justify-content: space-around;
    display: flex;
}

The CSS of the third div:

#addQuestion{
    background-color: #C5C9B8;
    width: 100%;
    color: #333333;
    height: 500px;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0;
    align-items: center;
    justify-content: space-around;
    display: flex;
    float: none;

}

What I try to accomplish:

  • I want the third div (the button group) to look like the div above.
    -The button group needs to have the same width as the one above.
    -I want to have the same margin between the button and the button group as it is between the form group and the submit button.
    -The gap between the two divs is far too great.

Thanks

Yes it does. Copy the code and test.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 4 Template</title>

    <!-- Bootstrap -->


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <style>
        #addQuestion {
            background-color: #C5C9B8;
            width: 100%;
            color: #333333;
            height: 150px;
            margin: 0 auto;
            overflow: hidden;
            padding: 10px 0;
            align-items: center;
            justify-content: space-around;
            display: flex;
            float: none;
        }
        
        #addQuestion .form-group {
            margin-bottom: 0;
        }

    </style>
</head>

<body>

    <div id="addQuestion">
        <div class="form-group-lg">
            <form class="form-group">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn btn-success active">
                    <input type="radio" autocomplete="off" checked> Add question
                </label>
                    <label class="btn btn-success">
                    <input type="radio" name="options" id="inlineRadio1" value="openQuestionModule()"
                           autocomplete="off">Question with a open answer </label>
                    <label class="btn btn-success">
                    <input type="radio" name="options" id="inlineRadio2" value="singleQuestionModule()"
                           autocomplete="off">
                    Question with only one right answer
                </label>
                </div>
            </form>
            <button class="btn btn-outline-success" id="saveTestBtn" onclick="saveTest()" type="submit">
            Save Test
        </button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

As mawburn said if you are using bootstrap4 then you should be using the proper structure and the proper centering classes. I suggest you work through the documentation and examples again and get familiar with how it works.

When using a framework you need to understand the framework before you can bend it to your will :slight_smile:

Then you will need to set a width for that column and set the child elements to fill that width. Bootstrap makes this very awkward for what is a simple task outside of bootstrap but I believe you need something like this.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 4 Template</title>

    <!-- Bootstrap -->


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

    <style>
        #tCreateTest {
            background-color: #C5C9B8;
            color: #333333;
            padding: 0 0 2rem;
        }
        
        #submitTitle {
            align-items: center;
            justify-content: space-around;
            display: flex;
        }
        
        #addQuestion {
            background-color: #C5C9B8;
            color: #333333;
            padding: 0 0 2rem;
        }
        
        #addQuestion .form-group {
            margin-bottom: 1rem;
        }
        #addQuestion .form-group label{margin-bottom:0;flex:1 0 30%;}
        #addQuestion .btn-group{display:flex;flex-wrap:wrap;}
        
    </style>
</head>

<body>
    <div class="container-fluid">
        <div id="tCreateTest" class="row justify-content-center">
            <div class="createTestContainer col-sm-8">
                <h2>Create</h2>
                <h1 id="testH1">Test</h1>

                <div class="form-group-lg">
                    <div id="testDetails">
                        <form class="form-group">
                            <label id="titelLabel" class="form-control-label" for="lgFormGroupInput">Enter title:</label>
                            <input type="text" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="title">
                        </form>
                        <button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
                                Submit
                            </button>
                    </div>
                </div>

            </div>
        </div>



        <div id="addQuestion" class="row justify-content-center">
            <div class="form-group-lg col-sm-8">
                <form class="form-group">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn btn-success active">
                            <input type="radio" autocomplete="off" checked> Add question
                        </label>
                        <label class="btn btn-success">
                            <input type="radio" name="options" id="inlineRadio1" value="openQuestionModule()"
                           autocomplete="off">Question with a open answer </label>
                        <label class="btn btn-success">
                            <input type="radio" name="options" id="inlineRadio2" value="singleQuestionModule()"
                           autocomplete="off">
                            Question with only one right answer
                        </label>
                    </div>
                </form>
                <button class="btn btn-outline-success" id="saveTestBtn" onclick="saveTest()" type="submit">
                Save Test
                </button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

The HTML and CSS look good. But I forgot to paste the jQuery and the javaScript that I am using, I didn’t think that it was of any importance in this matter. I was wrong, I have tried both with and without the JavaScript. Without it, the button group is centered. But with it, it’s not:

The JavaScript hides the divs, when they shouldn’t be visible. It also changes the text on one div.

$(function () {
    $("#testDetails").hide();
    $("#addQuestion").hide();
    $('.createTestContainer').click(function () {
        $("#testDetails").show();
    });
});

function testDetails() {
    document.getElementById("titelLabel").innerHTML = "Do you want to change the title?";
    document.getElementById("testH1").innerHTML = "TestName";

    var aQuestion = document.getElementById('addQuestion');
    if (aQuestion.style.display === 'none') {
        aQuestion.style.display = 'block';
    }
}

That’s because you are changing the display in JS to ‘block’ when the original display was ‘flex’!

I don’t do JS (much) but I’m guessing it should not be ‘block’ but be empty and then returns the original display:

e.g.

function testDetails() {
    document.getElementById("titelLabel").innerHTML = "Do you want to change the title?";
    document.getElementById("testH1").innerHTML = "TestName";

    var aQuestion = document.getElementById('addQuestion');
    if (aQuestion.style.display === 'none') {
        aQuestion.style.display = '';
    }
}

Don’t directly change the styles with js but instead simply add a class and then use that class to change the display of the element as required

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.