Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

77%

+5 −0

Q&A bootstrap : how to align text with a button inside a grid

I have this bootstrap code (grid) <div class="container p-3 center"> <div class="row"> <div class="bg-light border-bottom border-secondary border-top col-6 te...

0 answers · posted 2y ago by meneguzzo68‭ · edited 2y ago by Alexei‭

Question alignment vertical-alignment twitter-bootstrap

#4: Post edited by

Alexei‭ · 2022-02-03T08:08:26Z (about 2 years ago)
added relevant tags + minor fixes

Copy Link

Raw

Markdown

I have this bootstrap code (grid)
<div class="container p-3 center">
<div class="row">
<div class="bg-light border-bottom border-secondary border-top col-6 text-center pb-2 pt-2">
~~MY HOUSE</div>~~
<div class="bg-light border-top border-secondary border-bottom border-secondary col-6 text-center text-center pb-2 pt-2">
<button type="button" class="btn-primary btn-sm">MY CAR</button>
</div>
</div>
</div>
which returns this
![bootstrap button alignment](https://software.codidact.com/uploads/JjXSVBftzBhrrWwDkq9YMbAB)
~~what should I do to align (vertically) "MY HOUSE" with "MY CAR" ?~~
~~I tried adding align-middle but it does not work at all .~~

I have this bootstrap code (grid)
<div class="container p-3 center">
<div class="row">
<div class="bg-light border-bottom border-secondary border-top col-6 text-center pb-2 pt-2">
MY HOUSE
</div>
<div class="bg-light border-top border-secondary border-bottom border-secondary col-6 text-center text-center pb-2 pt-2">
<button type="button" class="btn-primary btn-sm">MY CAR</button>
</div>
</div>
</div>
which returns this
![bootstrap button alignment](https://software.codidact.com/uploads/JjXSVBftzBhrrWwDkq9YMbAB)
what should I do to align (vertically) "MY HOUSE" with "MY CAR"?
I tried adding align-middle but it does not work at all.

twitter-bootstrap

alignment vertical-alignment twitter-bootstrap

#3: Post edited by

meneguzzo68‭ · 2022-02-03T08:02:18Z (about 2 years ago)

Copy Link

Raw

Markdown

I have this bootstrap code (grid)
<div class="container p-3 center">
<div class="row">
<div class="bg-light border-bottom border-secondary border-top col-6 text-center pb-2 pt-2">
MY HOUSE</div>
<div class="bg-light border-top border-secondary border-bottom border-secondary col-6 text-center text-center pb-2 pt-2">
<button type="button" class="btn-primary btn-sm">MY CAR</button>
</div>
</div>
</div>
which returns this
![bootstrap button alignment](https://software.codidact.com/uploads/JjXSVBftzBhrrWwDkq9YMbAB)
what should I do to align (vertically) "MY HOUSE" with "MY CAR" ?
I tried adding align-middle but it does not work at all .

I have this bootstrap code (grid)
<div class="container p-3 center">
<div class="row">
<div class="bg-light border-bottom border-secondary border-top col-6 text-center pb-2 pt-2">
MY HOUSE</div>
<div class="bg-light border-top border-secondary border-bottom border-secondary col-6 text-center text-center pb-2 pt-2">
<button type="button" class="btn-primary btn-sm">MY CAR</button>
</div>
</div>
</div>
which returns this
![bootstrap button alignment](https://software.codidact.com/uploads/JjXSVBftzBhrrWwDkq9YMbAB)
what should I do to align (vertically) "MY HOUSE" with "MY CAR" ?
I tried adding align-middle but it does not work at all .

#2: Post edited by

meneguzzo68‭ · 2022-02-03T07:59:30Z (about 2 years ago)

Copy Link

Raw

Markdown

I have this bootstrap code (grid)
<div class="container p-3 center">
<div class="row">
<div class="bg-light border-bottom border-secondary border-top col-6 text-center pb-2 pt-2">
MY HOUSE</div>
<div class="bg-light border-top border-secondary border-bottom border-secondary col-6 text-center text-center pb-2 pt-2">
<button type="button" class="btn-primary btn-sm">MY CAR</button>
</div>
</div>
</div>
which returns this
![bootstrap button alignment](https://software.codidact.com/uploads/JjXSVBftzBhrrWwDkq9YMbAB)
~~what should I do to align "MY HOUSE" with "MY CAR" ?~~
I tried adding align-middle but it does not work at all .

I have this bootstrap code (grid)
<div class="container p-3 center">
<div class="row">
<div class="bg-light border-bottom border-secondary border-top col-6 text-center pb-2 pt-2">
MY HOUSE</div>
<div class="bg-light border-top border-secondary border-bottom border-secondary col-6 text-center text-center pb-2 pt-2">
<button type="button" class="btn-primary btn-sm">MY CAR</button>
</div>
</div>
</div>
which returns this
![bootstrap button alignment](https://software.codidact.com/uploads/JjXSVBftzBhrrWwDkq9YMbAB)
what should I do to align (vertically) "MY HOUSE" with "MY CAR" ?
I tried adding align-middle but it does not work at all .

#1: Initial revision by

meneguzzo68‭ · 2022-02-03T07:58:59Z (about 2 years ago)

Copy Link

Raw

Markdown

bootstrap : how to align text with a button inside a grid

I have this bootstrap code (grid)

     <div class="container p-3 center">
            <div class="row">
                <div class="bg-light border-bottom border-secondary border-top col-6 text-center pb-2 pt-2">
                    MY HOUSE</div>
                <div class="bg-light border-top border-secondary border-bottom border-secondary col-6 text-center text-center pb-2 pt-2">
                    <button type="button" class="btn-primary btn-sm">MY CAR</button>
                </div>              
            </div>
        </div>

which returns this

![bootstrap button alignment](https://software.codidact.com/uploads/JjXSVBftzBhrrWwDkq9YMbAB)

what should I do to align "MY HOUSE" with "MY CAR" ?

I tried adding align-middle but it does not work at all .

twitter-bootstrap

Communities

Post History