How to center some rows vertically using bootstrap

Question

My page currently looks like this:

and I want those buttons to be centered vertically - so they will be positioned in the middle of the page.

How can I do that? Here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Divide et Impera</title>
    <link href="css/normalize.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/fonts.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon" style="color: #fff !important"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link nav-color nav-active" href="#">Home</a>
                <a class="nav-link nav-color" href="#">Introducere DEI</a>
                <a class="nav-link nav-color" href="#">DEI Iterativ</a>
                <a class="nav-link nav-color" href="#">Probleme DEI</a>
              </div>
            </div>
          </nav>
        <div class="central">
            <div class="row">
                <div class="col-sm-6">BST(binary search tree)</div>
                <div class="col-sm-6">Calcul radacina cubica</div>
            </div>
            <div class="row">
            <div class="col-sm-6">Inmultirea polinoamelor</div>
            <div class="col-sm-6">Determinarea aceleratiei</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Gasirea varf in matrice</div>
            <div class="col-sm-6">Adunarea banilor in nr minim pasi</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Nr inversiuni in sir</div>
            <div class="col-sm-6">Spargerea baloanelor</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Freedom trail</div>
            <div class="col-sm-6">Karatsuba</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Alocarea nr minim de pagini</div>
            <div class="col-sm-6">Problema gogosilor</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Ghicitea vs calculator (1-100)</div>
            <div class="col-sm-6">Gradarea riglei</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Cel mai lung prefix comun</div>
            <div class="col-sm-6">Sortarea clatitelor</div>
        </div>
      </div>
    </div>
</body>
</html>

CSS

html {
    font-family: 'Proxima Nova';
    font-weight: 200;
    font-size: 10px;
    max-height: 100%;
    background-color: #00000f;
}

body {
    width: 100%;
    color: #fff;
    text-rendering: optimizeLegibility;
    font-family: "Proxima Nova" !important;
    font-size: 10px;
    overflow-x: hidden;
    background-color: #00000f !important;
}

.navbar-custom {
    position: relative;
}

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bg-transparent {
    background-color: transparent !important;
}

.nav-color {
    color :#fff !important;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

.nav-color:hover {
    color: #77dff1 !important;
}

.nav-active {
    color: #77dff1 !important;
}

.display-custom {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 17.5rem !important;
    text-align: center;
}

.lead-custom {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

/*Continut centru*/

#central {
    font-family: 'Proxima Nova', sans-serif;
    user-select: none;
    display: table;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#intro-wrap {
    display: table-cell;
    vertical-align: middle;
    max-width: 710px;
    width: 100%;
}

#intro {
    text-transform: uppercase;
    color: #77dff1 !important;
    font-size: 17.5rem;
    text-align: center;
}

.intro {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

#hr {
    position: absolute;
    top: 90%;
    width: 100%;
    margin: 0 auto;
}

hr {
    border-color: #77dff1 !important;
    max-width: 90%;
}


.button-wrap {
    postion: absolute;
    text-align: center;
    margin-top: 2.5rem;
}

.button-custom {
    font-family: 'Proxima Nova';
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    border: 2px solid #77dff1;
    padding: 15px;
    margin: 0 auto;
}

.button-custom:hover {
    font-weight: 100;
    color: #00000f;
    background: #77dff1;
}

/* probleme DEI */

.list-item-custom {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem 4rem;
    margin-bottom: 0.7rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

.list-item-custom:hover {
    background-color: #77dff1;
    color: #fff;
}

.col-sm-6 {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem 4rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

I've already tried to set these styles:

.central{
   display:table;
}

.row{
   display: table-cell;
   vertical-align: middle;
}

but it didn't work.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    font-family: 'Proxima Nova';
    font-weight: 200;
    font-size: 10px;
    max-height: 100%;
    background-color: #00000f;
}

body {
    width: 100%;
    color: #fff;
    text-rendering: optimizeLegibility;
    font-family: "Proxima Nova" !important;
    font-size: 10px;
    overflow-x: hidden;
    background-color: #00000f !important;
}

.navbar-custom {
    position: relative;
}

.abs-center-x {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.bg-transparent {
    background-color: transparent !important;
}

.nav-color {
    color :#fff !important;
    font-size: 15px;
    font-weight: bold;
    margin: 5px;
}

.nav-color:hover {
    color: #77dff1 !important;
}

.nav-active {
    color: #77dff1 !important;
}

.display-custom {
    text-transform: uppercase;
    color: #77dff1;
    font-size: 17.5rem !important;
    text-align: center;
}

.lead-custom {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

/*Continut centru*/

#central {
    font-family: 'Proxima Nova', sans-serif;
    user-select: none;
    display: table;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#intro-wrap {
    display: table-cell;
    vertical-align: middle;
    max-width: 710px;
    width: 100%;
}

#intro {
    text-transform: uppercase;
    color: #77dff1 !important;
    font-size: 17.5rem;
    text-align: center;
}

.intro {
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    max-width: 710px;
    line-height: 35px;
    color: #eeede7 !important;
}

#hr {
    position: absolute;
    top: 90%;
    width: 100%;
    margin: 0 auto;
}

hr {
    border-color: #77dff1 !important;
    max-width: 90%;
}


.button-wrap {
    postion: absolute;
    text-align: center;
    margin-top: 2.5rem;
}

.button-custom {
    font-family: 'Proxima Nova';
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    font-size: 2.5rem;
    color: #fff;
    cursor: pointer;
    border: 2px solid #77dff1;
    padding: 15px;
    margin: 0 auto;
}

.button-custom:hover {
    font-weight: 100;
    color: #00000f;
    background: #77dff1;
}

/* probleme DEI */

.list-item-custom {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem 4rem;
    margin-bottom: 0.7rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

.list-item-custom:hover {
    background-color: #77dff1;
    color: #fff;
}

.col-sm-6 {
    text-align: center;
    border: 1px solid #77dff1;
    color: #77dff1;
    padding: 2rem 4rem;
    font-weight: bold;
    font-size: 1.25rem;
    cursor: pointer;
}

.col-hover:hover {
    font-weight: 100;
    color: #fff;
    background: #77dff1;
}

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Divide et Impera</title>
    <link href="css/normalize.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/fonts.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon" style="color: #fff !important"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link nav-color nav-active" href="#">Home</a>
                <a class="nav-link nav-color" href="#">Introducere DEI</a>
                <a class="nav-link nav-color" href="#">DEI Iterativ</a>
                <a class="nav-link nav-color" href="#">Probleme DEI</a>
              </div>
            </div>
          </nav>
        <div class="central">
            <div class="row">
                <div class="col-sm-6">BST(binary search tree)</div>
                <div class="col-sm-6">Calcul radacina cubica</div>
            </div>
            <div class="row">
            <div class="col-sm-6">Inmultirea polinoamelor</div>
            <div class="col-sm-6">Determinarea aceleratiei</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Gasirea varf in matrice</div>
            <div class="col-sm-6">Adunarea banilor in nr minim pasi</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Nr inversiuni in sir</div>
            <div class="col-sm-6">Spargerea baloanelor</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Freedom trail</div>
            <div class="col-sm-6">Karatsuba</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Alocarea nr minim de pagini</div>
            <div class="col-sm-6">Problema gogosilor</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Ghicitea vs calculator (1-100)</div>
            <div class="col-sm-6">Gradarea riglei</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Cel mai lung prefix comun</div>
            <div class="col-sm-6">Sortarea clatitelor</div>
        </div>
      </div>
    </div>
</body>
</html>

What's the optimal approach to my problem? Can you also explain why my approach is not working? Thanks.

what version of bootstrap are you using? also, can you make this a working snippet? — DCR, Dec 29 '20 at 20:12
I also did the snippet - but for some reason I get a button on each line (in the snippet), not two buttons per line. — , Dec 29 '20 at 20:22
I have found out your error. In your HTML you declare a class **
**, But in your CSS you consider it as **ID** — Anwar Hossen, Dec 29 '20 at 20:29

dazed-and-confused · Accepted Answer · 2020-12-29T20:47:05.313

Edit with the fix:

I changed all of the col-sm-12 back to col-sm-6 and removed text-center

The main problem was in this line: <div class="central"> class should be id

In your CSS, this wasn't defined as a class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Divide et Impera</title>
    <link href="css/normalize.css" rel="stylesheet" />
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/fonts.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-transparent">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon" style="color: #fff !important"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
              <div class="navbar-nav">
                <a class="nav-link nav-color nav-active" href="#">Home</a>
                <a class="nav-link nav-color" href="#">Introducere DEI</a>
                <a class="nav-link nav-color" href="#">DEI Iterativ</a>
                <a class="nav-link nav-color" href="#">Probleme DEI</a>
              </div>
            </div>
          </nav>
        <div id="central">
            <div class="row">
                <div class="col-sm-6">BST(binary search tree)</div>
                <div class="col-sm-6">Calcul radacina cubica</div>
            </div>
            <div class="row">
            <div class="col-sm-6">Inmultirea polinoamelor</div>
            <div class="col-sm-6">Determinarea aceleratiei</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Gasirea varf in matrice</div>
            <div class="col-sm-6">Adunarea banilor in nr minim pasi</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Nr inversiuni in sir</div>
            <div class="col-sm-6">Spargerea baloanelor</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Freedom trail</div>
            <div class="col-sm-6">Karatsuba</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Alocarea nr minim de pagini</div>
            <div class="col-sm-6">Problema gogosilor</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Ghicitea vs calculator (1-100)</div>
            <div class="col-sm-6">Gradarea riglei</div>
        </div>
        <div class="row">
            <div class="col-sm-6">Cel mai lung prefix comun</div>
            <div class="col-sm-6">Sortarea clatitelor</div>
        </div>
      </div>
    </div>
</body>
</html>

It doesn't work - now each button is on each line. I wanted the buttons to be on 2 lines and those lines to be in center. — , Dec 29 '20 at 20:20
I'm confused. The picture you posted displays the buttons in two columns. It sounded like you wanted them displayed in a single column which is what I posted. Please clarify — dazed-and-confused, Dec 29 '20 at 20:26
I want the buttons to be in two columns, and all those columns to be centered vertically. — , Dec 29 '20 at 20:27
Again, in the picture you displayed, the buttons are in two columns and they're centered... — dazed-and-confused, Dec 29 '20 at 20:28
They are centered horizontally, not vertically. They are at the top of the page. I need them in the middle of the page:) — , Dec 29 '20 at 20:31

score -2 · Answer 2 · edited Dec 29 '20 at 20:13

-2

You should use <br> to center your buttons

edited Dec 29 '20 at 20:13

isherwood

58,414
16
114
157

answered Dec 29 '20 at 20:12

Ivan

1
3

Ivan, full sentences please! – DCR Dec 29 '20 at 20:13
Line breaks should not be used for layout positioning. – isherwood Dec 29 '20 at 20:13

How to center some rows vertically using bootstrap

2 Answers2