How to make a blank div in bootstrap with no text inside full with a bg-color

Question

How to display 3 lines inline side by side in bootstrap? I have a serious problem in the height and the width! If I use css only it displays. However when I want to use bootstrap I am getting stuck.

Here the code using CSS with only one line! The same process for the remaining two lines:

<div style="display:inline-block ;height:2px; width:100px;border-radius:10px; background-color: blue;"

How to do it using bootstrap? Should I use a parent class to get the height and the width?

what type of output do you exactly want could you share that please? — Pinal Sukhadiya, May 05 '22 at 11:35
yeahh something like that https://stackoverflow.com/questions/39607100/making-the-contents-of-div-row-centered-in-bootstrap — Zakaria Belassal, May 05 '22 at 11:42
please use the below code i posted. Did that is what you want or do you want another? — Pinal Sukhadiya, May 05 '22 at 11:53
What do you mean by "using bootstrap"? You're adding custom CSS, so you'll need to add it either inline (like you already have), or a separate CSS file. — WOUNDEDStevenJones, May 05 '22 at 11:56
No man cmon withonly bootstrap with no inline css !! only bootstrap !! If it was my purpse then , i will not post this ! — Zakaria Belassal, May 05 '22 at 11:57
use another code without css. I edited my code with only bootstrap. Please check new code. — Pinal Sukhadiya, May 05 '22 at 12:13
I made something like this without any container or rows !! only bootstrap but I need to reduce the height I dont know how to control the height of my span ```` ```` — Zakaria Belassal, May 05 '22 at 22:18

score 0 · Answer 1 · answered May 05 '22 at 11:31

0

You was thinking of something like this?

<div class="col-lg-3 text-center bg-secondary" style="height:200px;width:auto"></div>

answered May 05 '22 at 11:31

Jovan Jovanovic

127
8

yeahh something like this !! but i want three divs side by side I dont know how to do it with bootstrap so I have to duplicate the same thing 3 times ! – Zakaria Belassal May 05 '22 at 11:37

Pinal Sukhadiya · Answer 2 · 2022-05-05T12:13:05.177

0

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="p-5 bg-danger"></div>
            <p class="text-center">Lorem ipsum dolor sit</p>
        </div>
        <div class="col-md-4">
            <div class="p-5 bg-danger"></div>
            <p class="text-center">Lorem ipsum dolor sit</p>
        </div>
        <div class="col-md-4">
            <div class="p-5 bg-danger"></div>
            <p class="text-center">Lorem ipsum dolor sit</p>
        </div>
    </div>
</div>

edited May 05 '22 at 12:13

answered May 05 '22 at 11:52

Pinal Sukhadiya

241
1
5

just try to remove the p below !! any way many thanks it works ! – Zakaria Belassal May 05 '22 at 12:16
if there is another method without using container rows and col !! it will be perfect – Zakaria Belassal May 05 '22 at 12:24
if you are using bootstrap then it definitely use column row and container otherwise you have to use css. – Pinal Sukhadiya May 05 '22 at 12:27

How to make a blank div in bootstrap with no text inside full with a bg-color

2 Answers2