CODEWITHSUNDEEP
htmlcssangularbootstrap-4
user12281262
user12281262

Reputation:

Spacing between elements in html

I am working in an angular application. I have following code in my html component. code is as follows::

<div class="container">
    <div class="pt-4">
        <label class="screen-title">  
          <img class="mr-2" src="./assets/images/icons/complete.svg">
           Title
    </label>
    </div>
    <div class="row pt-5">
        <div class="col-6">
            <div class="row">
                <div class="col-1"><img src="./assets/images/image.svg" class="mr-1"></div>
                <div class="col-11">
                    Description
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-1"><img src="./assets/images/image.svg" class="mr-1"></div>
                <div class="col-11">
                     message
                </div>
            </div>
            <div class="row pt-3">
                <div class="col-12">
                    <button>Start</button>
                </div>
            </div>
        </div>
        <div class="col-5">
            <div class="row">
                <button class="btn-common btn-finished">Button1</button>
            </div>
            <div class="row pt-3">
                <button class="btn-common btn-extra-key">Button-2</button>
            </div>
            <div class="row pt-3">
                <button class="btn-common btn-another-room text-center" >Button-3</button>
            </div>
        </div>
    </div>
    <div class="row pt-5">
        <label  pt-5">Message         
        </label>
        <div>
            <img src="./assets/images/image1.svg">
        </div>
    </div>
</div>

My conainer css is as follows::

.container{
 width: 95%;
    height: 50vh;
    background-color: white;
    margin: 0;
    position: absolute;
    display: flex;
    display: ms-flexbox;
    align-items: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    top: 45%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

I am facing two problems in this. They are as follows::

1) image.svg in container is coming at extreme left of the container. I just want a bit space from left and then I want image.svg.(immage can be anything like tickmark) 2) Message at last should have image.svg just below that at center. But it is coming at random places in page.

I tried using some margin and padding but didn't got it. If I try using some margin, padding then but get out of container and page becomes messy.

How can correct it?

Upvotes: 0

Views: 854

Answers (2)

JakeFromSF
JakeFromSF

Reputation: 315

First you need to look at your code at line 41. enter image description here

Reference this for information on basic HTML practice. Also you can reference this for help with proper styling procedures so you can fix your alignment/spacing issues.

Upvotes: 0

can
can

Reputation: 214

When you use flex, you can use 

justify-content: space-between;

to add space between elements in the same container.

so look at flex.

Upvotes: 1

Related Questions