How can I remove the excess space from a column in Bootstrap 4?

I am facing an issue with excessive space in my navigation bar. I will provide the code below in hopes that someone can assist me in removing the extra space in my "col" elements. My goal is to have them positioned closer to one another. The biggest challenge lies with the last element, "PURCHASE NOW," specifically the "NOW" part which tends to drop down when the size is slightly increased.

For reference, here is a screenshot: 

/* 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>

htmlcssbootstrap-4

Answer №1

Could you please review the code snippet below? It should address your requirements. We have made a modification by removing col-xl-1 from nav-text and added padding to it. Feel free to adjust the padding value as needed.

You can find the code at the following link: https://jsfiddle.net/yudizsolutions/1k935u7h/9/

/* 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c3e33339d9898999a98b88ca9c979c91">[email protected]</a>/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>

Answer №2

It seems like you're suggesting this as the solution -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
....
                <a href=""><span class="purchase-now">PURCHASE NOW</span></a>
            </div>
        </div>

    </nav>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery, retrieve the "select" element within a specific row of a

I am working on a table row that has the following HTML structure: When the user interacts with the "Name" field, I trigger the "select" event and pass it to the nameDropChanged function. Once I have a reference to this select element, I need to change th ...

javascriptjqueryhtmljquery-selectors

Checkbox input with alphabetical ordering

I am currently facing an issue with a form that has checkboxes, but the text is not in alphabetical order. While there are plenty of examples for lists, finding examples for checkboxes has been challenging. http://jsfiddle.net/fG9qm/ <form> < ...

javascriptjqueryhtml

Vue 3 now allows for disabling the automatic renaming of CSS properties like "top/bottom/left/right" to "inset"

I noticed that Vue (or maybe Vite) automatically changes my css style attributes from "top: 0; right: 0; left: 0; bottom: 0;" to "inset: 0px;" However, this adaptation doesn't work well for older browsers that do not support the i ...

cssvue.jsvuejs3vite

Verifying internet connectivity and updating content using jQuery and JavaScript

Upon loading the page, the following functionality occurs without triggering a click event: The updated code attempts to determine if the internet connection is active. If the connection is off, the 'link' on the page will be disabled (non-click ...

javascriptjqueryhtmljquery-mobile

Displaying information in Angular2

I'm currently facing an issue where I am unable to display certain information from my API in my view, even though the console is showing me that the necessary data is being retrieved. Below is a snippet of my Angular service: getById(id){ retu ...

javascripthtmlangularionic2

Ensure that the input box expands to occupy the entire HTML page

After reviewing numerous pages and questions related to this topic, I have located the correct solution but am struggling to implement it. My goal is to achieve a similar outcome to the second question, but I'm having difficulty figuring out how to do ...

javascripthtmlcss

Creating a clean vertical alignment for two divs using Bootstrap 3

Is there a way to automatically set the same height for #div1 and #div2 regardless of the size of my logo in Bootstrap3? If not, what would be the best CSS rules to achieve this? View Example Here <div class="masthead"> <!-- Logo + Site Titl ...

csstwitter-bootstrap

How to conceal the bottom bar in JQuery Colorbox iframe

I have implemented colorbox to showcase an Iframe of the registration page on my website. Here is how it looks... https://i.sstatic.net/z1RGK.png Upon closer inspection, I noticed a white bar at the bottom of the Iframe where the close 'X' butt ...

javascriptjquerycssiframecolorbox

Unable to delete a segment of text within the description of each individual article division using jQuery

In an effort to clean up the article descriptions on my website's homepage, I am seeking a solution to remove the {AC} text that appears at the beginning of each description. While attempting to use the jQuery code provided below, I encountered an iss ...

javascriptjqueryhtml

What could be the reason for the malfunctioning toggle button on the Bootstrap navbar?

I'm having trouble with my bootstrap navbar. I've added the .sidebar-collapse class to the body tag so that when I click on the toggle button, the data should appear on the right side. However, this isn't happening. Can anyone spot what&apos ...

htmltwitter-bootstrapbootstrap-4

What determines the root element of the CSSOM (CSS Object Model)?

As I dive into my research on browser rendering, I've reached the stage in the rendering process where the browser creates the CSSOM from raw CSS. In many tutorials I've encountered, the authors confidently state that the body element is the roo ...

cssdomcssom

Adjusting AngularJS scroll position based on key presses

I am currently working on an autocomplete feature using AngularJS. I seem to be experiencing a problem with the scrollbar behavior. In the interactive gif provided, you can observe that the scrollbar remains stationary when navigating with the arrow keys. ...

javascriptcssangularjs

Determining WebElement Clickability in Java and Selenium: Beyond the Basics of isDisplayed, isEnabled, and findElement

There is a common method to test if a WebElement is clickable: It typically involves something like this: public static boolean isElementClickable(WebDriver driver, String accessor){ return driver.findElements(By.xpath(accessor)).size() > 0 & ...

javahtmlcssseleniumexception

How can I extract content nested within another element's id?

Below is the HTML code snippet I am working with: <div id='content'> <div id='price'>$100</div> <div id='another'>something</div> </div> I am able to extract content from the element w ...

javascriptjqueryhtmlcss

Insert HTML content into an iframe with a callback function

We are receiving information from the backend server and need to transfer it to an iframe. In order to accurately set the height of the iframe to match the content, we must wait for the content to be loaded into the iframe. However, this process may not ha ...

javascripthtmliframecallback

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

javascripthtml

Change the type of field from a div to an input when clicked

I'm trying to achieve something unique with a div on my webpage. When the user clicks on it, I want the div to transform into an input field. Initially, the div looks like this: <div>This is the content.</div> But when clicked, I want i ...

htmlangularjs

Failure to transfer form input values to PHP script

Currently, I am developing an email form that utilizes AJAX to connect to an external PHP file using PHPMailer for sending emails. In the beginning of the PHP file, I have the following code: if(count($_POST) > 0){ $message= 'Full Name: & ...

phpjqueryhtmlajaxphpmailer

Tips for preventing duplicate content in bootstrap

I want to showcase a clickable phone number on my website for mobile users. Here's the code snippet: class MyGrid extends React.Component { constructor(props) { super(props); this.state = { phone: "123" }; } render() { return ( ...

reactjsbootstrap-4react-bootstrap

What steps are involved in incorporating a machine learning algorithm from a Python file into a Django website?

I'm currently utilizing the random forest algorithm in Python to make predictions about college dropouts. The algorithm has been completed, and now I need to integrate the file into a website using Django. However, I am facing issues as the imported f ...

pythonhtmldjangocsvmachine-learning