Is it posaible to delete the extra space from column? Bootstrap 4

user_14410321 0
Viewed 48

I have a problem with extra space in my navigation bar. I will place the code down if you can help me with deleting extra space in my "col". I want to remove that extra space so they can be closer to each other. One of the problems is the last one "PURCHASE NOW" I have a big struggle with the "NOW" part because when I do something a little bigger it places it below.

There is a picture https://prnt.sc/w9e4w9

/* Navigation Bar */
.navigation{
    background-color: white;
    padding: 33px 0;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
}

.navigation .row > div > a{
    text-decoration: none;
}

.navigation span:hover{
    color: black;
}

.navigation .logo img{
    position: relative;
}

.navigation span{
    font-size: 14px;
    color: grey;
}

.navigation .logo img{
    width: 44px;
}

.navigation .nav-text{
    padding: 10px 0;
}

.navigation .ceo-nav{
    padding-left: 300px;
}

.navigation .purchase-now{
    position: relative;
    left: -50px;
}
        <div class="navigation">
            <div class="container-fluid ceo-nav">
                <div class="row">
                    <div class="col-xl-1 logo">
                        <img src="img/logo.png" alt="Logo">
                    </div>
                    <div class="offset-xl-4 col-xl-1 nav-text">
                        <a href=""><span class="home">HOME</span></a>
                    </div>
                    <div class="col-xl-1 nav-text">
                        <a href=""><span class="work">WORK</span></a>
                    </div>
                    <div class="col-xl-1 nav-text">
                        <a href=""><span class="about">ABOUT</span></a>
                    </div>
                    <div class="col-xl-1 nav-text">
                        <a href=""><span class="blog">BLOG</span></a>
                    </div>
                    <div class="col-xl-1 nav-text">
                        <a href=""><span class="contact">CONTACT</span></a>
                    </div>
                    <div class="col-xl-2 nav-text">
                        <a href=""><span class="purchase-now">PURCHASE NOW</span></a>
                    </div>
                </div>
            </div>
        </div>

bootstrap-4 css html
2 Answers

If I don't get you wrong, this is your solution -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        /* Navigation Bar */
.navigation{
    background-color: white;
    padding: 33px 0;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
}

.navigation .row > div > a{
    text-decoration: none;
}

.navigation span:hover{
    color: black;
}

.navigation span{
    font-size: 14px;
    color: grey;
}

.nav-item{
  width: 110px;
  text-align: center;
}

.navigation .nav-text{
    padding: 10px 0;
}

    </style>
</head>
<body>
    <nav class="navigation navbar navbar-expand-xl navbar-light bg-light">
        <div class="container-fluid ceo-nav collapse navbar-collapse" id="navbarNav">
            <div class="row navbar-nav">
                <div class="col-xl-1 nav-item">
                    <a class="navbar-brand m-0" href="#"><img src="img/logo.png" alt="Logo"></a>
                </div>
                <div class="offset-xl-4 col-xl-1 nav-text nav-item active">
                    <a href=""><span class="home">HOME</span></a>
                </div>
                <div class="col-xl-1 nav-text nav-item">
                    <a href=""><span class="work">WORK</span></a>
                </div>
                <div class="col-xl-1 nav-text nav-item">
                    <a href=""><span class="about">ABOUT</span></a>
                </div>
                <div class="col-xl-1 nav-text nav-item">
                    <a href=""><span class="blog">BLOG</span></a>
                </div>
                <div class="col-xl-1 nav-text nav-item">
                    <a href=""><span class="contact">CONTACT</span></a>
                </div>
                <div class="col-xl-2 nav-text nav-item">
                    <a href=""><span class="purchase-now">PURCHASE NOW</span></a>
                </div>
            </div>
        </div>

    </nav>

</body>
</html>

user_123528690

Can you please check the below code? Hope it will work for you. We have just removed col-xl-1 from nav-text and gave padding into it. you can change this spacing using padding value as per your requirements.

Please refer to this link: https://jsfiddle.net/yudizsolutions/1k935u7h/8/

/* Navigation Bar */
.navigation{
    background-color: white;
    padding: 33px 0;
    text-align: center;
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
}

.navigation .row > div > a{
    text-decoration: none;
}

.navigation span:hover{
    color: black;
}

.navigation .logo img{
    position: relative;
}

.navigation span{
    font-size: 14px;
    color: grey;
}

.navigation .logo img{
    width: 44px;
}

.navigation .nav-text {
    display: block;
    padding: 10px 15px;
}
.navigation .ceo-nav{
    padding-left: 300px;
}

.navigation .purchase-now{
    position: relative;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navigation">
    <div class="container-fluid ceo-nav">
        <div class="row">
            <div class="logo">
                <img src="img/logo.png" alt="Logo">
            </div>
            <div class="offset-xl-4 nav-text">
                <a href=""><span class="home">HOME</span></a>
            </div>
            <div class="nav-text">
                <a href=""><span class="work">WORK</span></a>
            </div>
            <div class="nav-text">
                <a href=""><span class="about">ABOUT</span></a>
            </div>
            <div class="nav-text">
                <a href=""><span class="blog">BLOG</span></a>
            </div>
            <div class="nav-text">
                <a href=""><span class="contact">CONTACT</span></a>
            </div>
            <div class="nav-text">
                <a href=""><span class="purchase-now">PURCHASE NOW</span></a>
            </div>
        </div>
    </div>
</div>

user_122138960
Related