CODEWITHSUNDEEP
htmlwebbootstrap-5
John Smith
John Smith

Reputation: 69

Add spacing between image and text in navbar - bootstrap

Current site I have this site at the moment with this code:


<body>
    <nav class="navbar bg-primary">
        <div class="container-inline navbar-brand">
            <img src="img/logo.png"width="55">
            <a class="text-light">Test</a>
        </div>

        <a class="nav-link text-light">One</a>
        <a class="nav-link text-light">Two</a>
        <a class="nav-link text-light">Three</a>
        <a class="nav-link text-light">Four</a>
    </nav>
    <h1>Hello</h1>
</body>

I want there to be some more spacing between the text "Test" and the logo image, I have tried this such as ml-3 and pl-3 and similar, however none of those seem to be working.,

Upvotes: 0

Views: 1324

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362430

There is no longer ml-* in Bootstrap 5. It's been replaced with ms-*. Read about the changes from Bootstrap 4 to Bootstrap 5.

<div class="container-inline navbar-brand">
    <img src=".." width="55">
    <a class="text-light d-inline-block ms-3">Test</a>
</div>

Codeply

Upvotes: 0

Okhaimie
Okhaimie

Reputation: 1

On the div for the image you could add a mr-5

<div class="container-inline navbar-brand mr-5">
        <img src="img/logo.png"width="55">
        <a class="text-light">Test</a>
    </div>

If you don't need too much space that should work. mr ranges from 1-5 so adjust as you see fit.

Upvotes: 0

user14128818
user14128818

Reputation:

You can use margin property and padding property of image and make sure to confirm the margin or padding when the display size changes . I think youre trying to make responsive as well so margin of px doesnt change with display size . you`re using bootstrap right.

class="navbar-brand"

Add class to your image this will give you right margin .

Upvotes: 0

user14206391
user14206391

Reputation:

Apply style with margin property to your img element, u can adjust the pixel

<img src="img/logo.png" width="55" style="margin-right:20px">

Upvotes: 2

Related Questions