What is the best way to decrease the spacing between buttons?

I've been working on creating a welcome banner for my index page, but I'm facing an issue where the buttons need to be closer to each other. However, I can't seem to figure out how to achieve this. The buttons should be aligned to the right and left to bring them closer, but using flex is not pushing them towards each other as expected.

Below is the code snippet I am currently working with:

<section id="career">
<!--Welcome banner-->
    <div class="container-fluid height-51 career-picture d-flex align-items-center justify-content-center">
        <div class="career-text">
            <div class="row">
                <div class="col-md-12">
                    <div class="display-3 text-white text-center font-proximanovabold custom-font-size-header-title">Company</div>
                </div>
                <div class="col-md-12">
                    <div class="h5 text-white text-center font-proximanovalight custom-font-size-header-content">The biggest shipping company on earth</div>
                </div>
                <div class="col-md-6 text-center">
                    <button class="btn btn-green text-white custom-font-size-header-button">ButtonOne</button>
                </div>
                <div class="col-md-6 text-center">
                    <button class="btn btn-green text-white custom-font-size-header-button">ButtonTwo</button>
                </div>
            </div>
        </div>
    </div>
<!--End of welcome banner section-->
</section>

Here are the CSS edits I have made that could potentially be causing the issue:

.height-51{
    min-height: 51.5vh;
}
.career-picture{
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("../images/career.jpg") center/cover no-repeat;
}
#career .btn{
    padding: 12px 24px !important;
}

I'm seeking advice on how to adjust the positioning of the buttons to bring them closer together. Why are they not moving closer when adjusted with margin or padding? Any help would be appreciated. Thank you.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Reposition the buttons to a new row and adjust the column width to col-md-2 instead of col-md-6 to prevent them from occupying half of the row and causing it to widen unnecessarily. Also, eliminate the padding that is currently applied.

/* Additional CSS styles */

.height-51 {
  min-height: 51.5vh;
}

.career-picture {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/career.jpg") center/cover no-repeat;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section id="career">
  <!--Welcome banner-->
  <div class="container-fluid height-51 career-picture d-flex align-items-center justify-content-center">
    <div class="career-text">
      <div class="row">
        <div class="col-md-12">
          <div class="display-3 text-white text-center font-proximanovabold custom-font-size-header-title">Company</div>
        </div>
        <div class="col-md-12">
          <div class="h5 text-white text-center font-proximanovalight custom-font-size-header-content">The biggest shipping company on earth</div>
        </div>

      </div>
      <div class="row justify-content-center">
        <div class="col-md-2 text-center">
          <button class="btn btn-green text-white custom-font-size-header-button">ButtonOne</button>
        </div>
        <div class="col-md-2 text-center">
          <button class="btn btn-green text-white custom-font-size-header-button">ButtonTwo</button>
        </div>
      </div>
    </div>
  </div>
  <!--End of welcome banner section-->
</section>

Updated Design:

https://i.sstatic.net/mQgg0.png

Answer №2

Place both buttons inside the same div and expand them across 12 columns...

HTML

<section id="experience">
<!--Company information section-->
    <div class="container-fluid height-51 experience-picture d-flex align-items-center justify-content-center">
        <div class="experience-text">
            <div class="row">
                <div class="col-md-12">
                    <div class="display-3 text-white text-center font-expletusbold custom-font-size-header-title">Business</div>
                </div>
                <div class="col-md-12">
                    <div class="h5 text-white text-center font-expletuslight custom-font-size-header-content">Leading in sustainable business practices</div>
                </div>
                <div class="col-md-12 text-center">
                    <button class="btn btn-success text-white custom-font-size-header-button">First Button</button>
                 <button class="btn btn-success text-white custom-font-sizer-header-button">Second Button</button>
                </div>
            </div>
        </div>
    </div>
<!--End of company info section-->
</section>

CSS

.height-51{
  min-height: 51.5vh;
  padding: 1em;
}
.experience-picture {
  background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url("../images/experience.jpg") center/cover no-repeat;
}
#experience .btn{
  padding: 12px 24px;
  margin: 0.5em;
}

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 CSS syntax to target a class within an element distinguished by its unique id

Consider the following code snippet: <div id="dogs" class="content">hello</div> <div id="frogs" class="content">hello</div> <div id="hogs" class="content">hello</div> <div id="logs" class="content">hello</div&g ...

css

How to prevent CSS styles from being overridden by SASS in a stylesheet

When working with a Sass file, I encountered an issue with the way styles were being output. The original style in the Sass file looked like this: .style{ width: calc(100%); } However, when compiled to its corresponding CSS file, the output was: .style{ ...

htmlcsssass

Using Django Template Variables in JavaScript Functions

Within one of my templates, there is a for loop that iterates over all the items. Whenever a user likes or dislikes an item, it should trigger a function in my code. I successfully set up the button's HTML like this: <button onclick='update_li ...

javascripthtmldjangodjango-viewsdjango-templates

Switch up the appearance of a button by altering its image depending on the value it holds

There are two buttons generated dynamically (not within my control) that I would like to customize with different images. Since I can't actually change the button code, I believe I will need to utilize CSS to achieve this based on the CSS values. The ...

css

Trouble with reading from a newly generated file in a node.js program

Whenever I launch my results.html page, I generate a new JSON file and use express.static to allow access to the public folder files in the browser. Although my application is functioning properly, I find myself having to click the button multiple times f ...

javascripthtmljsonnode.jsexpress

Tweaking react-lottie and SVG dimensions with CSS media queries: A step-by-step guide

I am currently working on a React project that involves displaying Lottie-react animations and SVG's. My main concern is making sure that these illustrations are responsive on my website. The components are stored in a .js file, which I import into m ...

cssreactjsreact-componentlottie

Intersecting Hyperlink Elements Creating a Hover Effect

I've encountered a perplexing CSS display issue and I'm at a loss for alternative solutions besides simply widening the width of the parent div. Allow me to explain the layout: <div> <ul> <li> <a href="javascrip ...

css

CSS button pressed

I came across a helpful discussion on the topic of CSS for pressed buttons, which provided some answers that I found useful. The link to the discussion can be found here: Pressed <button> CSS. Currently, I have a button within a link and I would lik ...

javascriptjqueryhtmlcss

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...

htmlcssoutlook

"Enhance your listening experience with an audio player featuring album covers as captivating

Is there a way to create an audio player with the album cover image serving as the background, while ensuring all control buttons are displayed on top of that same image? I attempted using the following code snippet: <audio controls = 'controls&ap ...

javascriptcsshtmlbootstrap-4

The fixed position feature seems to be malfunctioning

I'm attempting to incorporate the persistent header feature demonstrated in this tutorial: http://css-tricks.com/persistent-headers/ Here's My Code: <div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area"> <h2 class ...

jqueryhtmlcss

Using JavaScript variables in CSS: a beginner's guide

My website features a typewriter effect, but I want the animation to match the length of the words exactly. I attempted using JavaScript variables in CSS, but unfortunately, it's not functioning properly. Could someone please advise me on how to remed ...

javascripthtmlcss

Update the background URL of a div element using an HTML tag

My question is about a CSS div with set dimensions and background that I want to change on hover. I am aware that this seems like a simple task, but what I really want to do is retrieve the background sources from within the HTML tag itself. For example: ...

javascripthtmlcss

Experiencing difficulty aligning the Material UI grid to float on the right side

I'm currently in the learning phase of material-ui and encountering an issue with floating the grid content to the right side. Despite trying alignItems="flex-start" justify="flex-end" direction="row" in the container grid, as well as using the css p ...

cssreactjsmaterial-ui

Erase the contents of a div by clicking a button

I am currently working on a game project that utilizes drag-and-drop functionality, similar to Blockly and Scratch. One of the key features I am trying to implement is the ability to clear the contents of a target container by clicking a Reset button. Desp ...

javascripthtmljquerycss

Activate button through input using Bootstrap

I am struggling to achieve the desired functionality with my "sendit" button. I want it to be enabled as soon as there are any characters entered in the box, but I have tried multiple solutions without success. Part of HTML: <input type="password ...

javascriptjquerytwitter-bootstrap

Is the ctx.arc method in Javascript able to determine the vertices based on the pixel size and radius?

When working with Javascript's Canvas, you have the option to draw a circle easily using the ctx.arc method. I'm curious, does the arc function automatically calculate the optimal number of vertices needed to draw a circle in order to achieve the ...

javascripthtmlcanvasdrawingrendering

How can I show two unique chart modals simultaneously?

Below is the chart that I am currently working on: https://i.stack.imgur.com/bHSj6.png While I am able to display the charts separately, I am encountering difficulties when trying to display both of them on the same chart line. <!DOCTYPE html> < ...

htmlcsscanvascharts

Navigating a collection of objects after a button is clicked

My current library project involves looping through an array of objects to display them on a grid based on input values. Here is the code snippet for my loop: const addBook = (ev) => { ev.preventDefault(); let myLibrary = []; let bookIn ...

javascripthtmlcss

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5