Tips for eliminating the gap between a heading and column in Bootstrap 4

.rowHeight{
            height: 100px;
        }
        
        .padding-0
        {
            padding-right: 0px;
            paddig-left: 0px;
            margin-left: 0px;
            margin-right: 0px;
        }
        
        
        .cart{
            height:42px;
            width: 42px;
        }
<!DOCTYPE html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>S-MART | WELCOME</title>
            <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="syles/style.css">
        </head>
        <body>
            <div class="container">
                <div class="row rowHeight justify-content-center">
                    <div class="col-md-10 padding-0">
                        <h1 class="header">S-MART</h1>
                    </div>
                    <div class="col-md-2 padding-0">
                        <img src="images/shopping_cart_PNG58.png" class="cart" alt="Shoppingcart" align="center"> </img>
                    </div>
            </div>
        
            <script src="js/bootstrap.min.js"></script>
        </body>
        </html>

I would like to eliminate the gap between the heading and the image, so it appears as "S-MART(IMAGE)". As a beginner in this field, I have been encountering similar issues, so any guidance or advice would be greatly appreciated.

htmlcssbootstrap-4

Answer №1

If you want to position div elements next to each other, one common method is to use the float: left property and set their widths accordingly. For instance, you can assign unique IDs to each div element (such as myH1 and myH1_pic) and define their properties in the CSS file like so (adjust the widths as needed):

<div class="row rowHeight justify-content-center">
    <div class="col-md-10 padding-0 " id="myH1">
       <h1 class="header">S-MART</h1>
    </div>
       <div class="col-md-2 padding-0 child" id="myH1_pic">
           <img src="images/shopping_cart_PNG58.png" class="cart" alt="Shoppingcart" align="center"> </img>
       </div>
  </div>

Here is the corresponding CSS:

#myH1{
    width: 150px;
    float: left;}

#myH1_pic{
    width: 200px;
    float:left;
}

It's worth noting that there's a missing closing div tag in your code snippet.

Answer №2

If you want to eliminate the default margin in the H1 tag, simply remove it from your CSS code. I hope this solution works for you.

.rowHeight{
    height: 100px;
}

.padding-0
{
    padding-right: 0px;
    paddig-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
}
h1{
     margin : 0px;
}

.cart{
    height:42px;
    width: 42px;
}
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>S-MART | WELCOME</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="syles/style.css">
</head>
<body>
    <div class="container">
        <div class="row rowHeight justify-content-center">
            <div class="col-md-10 padding-0">
                <h1 class="header">S-MART</h1>
            </div>
            <div class="col-md-2 padding-0">
                <img src="images/shopping_cart_PNG58.png" class="cart" alt="Shoppingcart" align="center"> </img>
            </div>
       </div>
    </div>

    <script src="js/bootstrap.min.js"></script>
</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

Is there a way to eliminate the horizontal line in my Table design?

Is there a way to eliminate the horizontal line from the table? css, html <table border="1" style="width:100%; border-collapse: collapse"> <tr> <th>Prepared By:</th> <th>Released ...

htmlcss

Angular JS does not display the bold tag for specific words

I'm currently working on an Angular JS application and receiving text from the server that needs to be displayed on my website. The text received from the server is: "My name is <b> John </b>" with b tags. Unfortunately, when I display ...

htmlangularjs

The active class consistently adds new menu options without removing the previous ones

I am facing an issue with my menu where the active class does not get added to the new menu item when clicked, despite being removed from the previous item. Below is the code snippet: <div class="row text-center" id="side-menu"> <nav> ...

jqueryhtmlcssnavigation

Do you require assistance with creating an image slideshow?

My first day working with HTML was a success as I successfully built a navigation bar that looks pretty cool. Take a look at it here. Next on my list is to incorporate a slideshow into my site, possibly using JavaScript or jQuery plugins. I'm aiming ...

javascriptjqueryhtmlcssplugins

Design interactive images in NativeScript

I need assistance setting up clickable images in NativeScript. My goal is to arrange 5 images horizontally, and when one image is clicked, the images to its left should change their values. Here's what I've attempted: <Label col="0" row="0" ...

javascripthtmltypescriptnativescript

The issue with VueEditor in Nuxt.js is that it's throwing an error

When working on my Nuxt.js project, I integrated the vue2-editor package for writing articles with HTML. Everything functions properly when I enter text and submit it, however, upon reloading the page, I encounter an error stating "document is not defined" ...

javascripthtmlvue.jsnuxt.js

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

If you're looking for an example of two columns adjusting their width based on mouse movement, check out this page from W3Schools. I'm trying to implement this feature in my React app, but I'm unsure of how to proceed. Below is the JSX code ...

javascriptcssreactjsnext.js

Triggering a click event on various instances of a similar element type using the onclick function

Hey there, I'm a newcomer to Javascript. I've been practicing my Javascript skills and trying to replicate something similar to what was achieved in this example: Change Button color onClick My goal is to have this functionality work for multip ...

javascripthtmlcssinputonclick

Displaying a div after a successful form submission using Jquery

I created two popup windows. One is used to ask the user whether they want to submit the form, and if they click 'yes', the form is submitted. The issue I encountered is that the other popup window should be shown after the form is successfully s ...

javascriptjqueryhtmlformssubmit

Is it better to apply the font-family to the body or to the html element?

Is it more appropriate to specify the font-family CSS property on the html element or the body element? html { font-family: sans-serif; } or body { font-family: sans-serif; } I've looked into this issue online, but there doesn't seem to ...

htmlcss

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

javascriptjqueryhtmlcss

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

javascriptjqueryhtmlangularjsfunction

jQuery selector unable to locate the specified class in the table row

After receiving an array of strings as a response from an SQL query, I am using JavaScript to dynamically add this data as rows to an HTML table: loadUsers: function() { . . . function displayUsersOnTable(response) { for(var i = ...

javascriptjqueryhtmlcss

Switch the displayed image(s) based on the radio button selection made by the user

I need help implementing a feature on my website where users can change an image by selecting radio buttons. For example, there are three options: 1) Fox 2) Cat 3) Dog When the user chooses "Fox," I want an image of a fox to be displayed. If they then sw ...

javascripthtmlcsscolorsradio-button

The scroll bar in the main window vanishes as the popup window expands in size

When the popup expands in size, the bottom portion becomes inaccessible even with a scrollbar present. Ideally, the scrollbar on the parent window should adjust automatically as the popup grows, allowing users to scroll and view the entire content. ...

htmlcss

Dynamic HTML gallery that supports the addition of fresh images

Looking to showcase images from a local folder in a slideshow on a simple web page? The page should automatically update when new images are added or removed from the folder. I am not an expert and prefer a minimalist design with perhaps just a transitio ...

jqueryhtmlcssdynamicslideshow

Can someone explain the functionality of the CSS Selector > * when used inside a Vue.js component?

While exploring the Vuestic admin dashboard tool, I noticed a glitch in the UI where the donut chart appeared larger than its container. I tried to troubleshoot and fix it for submission as a PR, but I encountered an unfamiliar CSS selector > * while de ...

cssvue.jsvue-component

How to position an image on top of each printed page using HTML/CSS (SCSS)

I've created a simple and small webpage that looks like this: https://i.sstatic.net/R7Ajz.png Everything is perfect in the browser, with all the styles (margin, padding, etc.) just as I want it. However, my issue lies in the print view of the page. ...

javascripthtmlcsssass

Video background is malfunctioning on Firefox and Internet Explorer

Currently, I am facing some issues with the JQuery plugin 'videoBG'. The problem is that when I view the video offline, it works perfectly in all browsers. However, once I go online, the video stops working in FireFox and IE. It seems like the sc ...

jqueryhtmlweb

Move the box upwards and change it to grayscale when hovering over the image, then reverse the effect when the hover

As I hover over the image, my goal is to make a gray box appear at the bottom and smoothly slide up. While it slides up, everything it covers should turn grayscale. When I move my mouse away from the image, I want the gray box to slide back down and remove ...

javascripthtmlcsscss-animations