What is the best way to create a gap between two Bootstrap buttons?

I'm attempting to create two buttons in the same line in this code, but it's not working as I want. Take a look below:

 <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success" onClick={() => this._filterByYear('2006')}>2006</button>
    <button class="btn btn-success" onClick={() => this._filterByYear('2007')}>2007</button>
  </div>
  </div>
  <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success" onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="btn btn-success" onClick={() => this._filterByYear('2009')}>2009</button>

In the demo code, you can see there is no space between the two buttons. I want them to appear like this https://ibb.co/rFD6knk

Check out the demo for reference.

htmlcssbootstrap-4w3.css

Answer №1

If you're looking for a quick fix, this might do the trick. Simply copy and paste the following code snippet into your CSS file:

.custom-nav {
    display: flex; 
    justify-content: space-between;
}

Answer №2

Include this custom CSS :

button {
    margin-left: 15px;
    margin-top: 15px;
    background: lightblue;
    padding: 12px 24px;
    border: 2px solid black;
}

The margin-left property adds space on the left side of the button, while margin-top provides spacing at the top. The background attribute changes the button's background color to light blue, and padding creates internal space within the button. Using border with a value of 2px solid black removes the default border while adding a new black border around the button.

Answer №3

These are the perfect styles for you.

.nav-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  padding: 5px 0;
}

.btn-style {
  max-width: fit-content;
}

header {
  max-width: 200px;
}

image {
  width: 100%;
}

Check out the Codepen link

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

Confirm the data within an HTML table and apply color coding to the cells appropriately

Currently, I have an HTML table used to automatically validate data collected from soil pollutants analyses. Here is a snippet describing the table structure: <table id="table1"> <thead class="fixedHeader"> <tr><input type="submit" ...

javascriptjqueryhtml

Using jQuery, you can easily insert a <span> tag around selected text and then save this modification permanently in a local HTML file

I have compiled notes in an HTML file stored on my local computer, with the intention of keeping it solely for personal use. For instance, I have a snippet like this: <p> this is an example text</p> My goal is to highlight the word "example" ...

javascriptphpjqueryhtml

Injecting variable styles into my VueJS component

I am currently working on developing a custom progress bar to visualize the percentage of completed tasks. The approach I am taking involves using v-bind:styles and passing {width: dynamicWidth + '%'} to regulate the progression of the bar. To ac ...

javascriptcssvue.js

Hide the parent div element if the nested unordered list does not contain any items

I transformed an HTML template into a typo3 template using automaketemplate. Within the HTML code, there is a structure of divs like this <div class="bigPostItWrap">1 <div class="postit">2 <div class="p ...

templateshtmltypo3typoscript

Discovering instances of a specific string within a larger string

My goal is to customize the default behavior of the alert function. Below is the code I am using: window.alert=function(txt) { waitOk='wait'; setMsgBox(txt); btnMsgOk.focus(); } However, I need this functionality to vary ba ...

javascripthtml

Ways to verify the presence of a Div element within an iframe

Hello everyone. I am looking to determine if the element DIV test is present within an iframe, and if it is, I want to display an alert. <html> <body> <div id="test">test</div> </body> </html> I have loaded thi ...

htmliframe

Arrangement of Axes in Google Graphs

I have a basic form where users can input data through drop-down selectors. There are 10 questions, each with a rating out of 10. The entered data is then used to generate a Google graph on the same page. Although the graph populates correctly, the axis ...

javascripthtmlchartsgoogle-visualizationbar-chart

Replacing an array in Perl with the contents of a SQL database: A step-by-step guide

Update: (Check Revised Code at the bottom) The code is now functioning properly to retrieve data from 2 databases with some additional cleaning required. However, I'm facing a challenge where the code previously used: next unless $currentuser ~~ @las ...

htmlmysqldatabaseperldbi

Unlocking the potential of data inputted in a JQuery Autocomplete form

Seeking assistance with extracting data from a form to utilize for additional purposes <form onsubmit="return false;"> Enter a School: <input id="schoolsearch" type="text" /> <INPUT TYPE=SUBMIT VALUE="GO"> </form> I am struggling ...

phpjqueryhtmlformsautocomplete

What is the process for integrating php script within javascript?

Is it possible to incorporate php scripts into javascript[1] in the same manner as it can be done in html[2]? server.php: <?php echo 'hello World'; ?> client.js (or client.php if needed): function foo() { var i = <?php include ...

phpjavascripthtmlinclude

The usage of the bootstrapTable() function creates a gap below the displayed table information

Currently, I am working on incorporating a table into my webpage that will load data from an API. After some research, I found a Bootstrap table library to assist with this task. However, I have encountered an issue with setting the table height dynamicall ...

javascripthtmlcsstwitter-bootstrapbootstrap-table

How to use Javascript to pause an HTML5 video when closed

I am new to coding and currently working on a project in Adobe Edge Animate. I have managed to create a return button that allows users to close out of a video and go back to the main menu. However, I am facing an issue where the video audio continues to p ...

javascripthtmlvideoadobe-edge

Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

I am trying to implement the template from Laurent's answer on R Shiny - Popup window when hovering over icon in my code below, which involves integrating a popup window into a rhandsontable table. My goal is to display the popup window as depicted in ...

javascriptcssrshinybslib

Insert an HTML element or Angular component dynamically when a specific function is called in an Angular application

Currently, I am working on a component that contains a button connected to a function in the .ts file. My goal is to have this function add an HTML element or make it visible when the button is clicked. Specifically, I would like a dynamic <div> elem ...

htmlangulartypescriptbuttonclick

Customize the delete icon margin styles in Material-UI Chip component

Currently, I have implemented the V4 MUI Chip component with a small size and outlined variant, complete with a specified deleteIcon. However, I am encountering difficulties when attempting to override the margin-right property of the deleteIcon due to MUI ...

cssreactjsmaterial-ui

Creating a multi-column layout with HTML and CSS

I'm currently exploring the most effective method to design this concept: https://i.stack.imgur.com/SOQp4.png The black square symbolizes small icons, accompanied by a heading and paragraph for each specific section. The icons need to align with the ...

htmlcss

Having trouble uploading an image of a varchar type from my MySQL database. Any ideas on how to fix this issue?

Currently, my PHP server is hosted on 000webhost and I am using phpMyAdmin for the database. The structure of my image row in the database table is as follows: image varchar(100) utf8_unicode_ci I am attempting to create a functionality where a user ...

phphtmlmysqldatabaseimage

Ways to retrieve the position of hyperlinks within a div element

<div class="nav"> <a href="#item1">item1</a> <a href="#item2">item2</a> <a href="#item3">item3</a> </div> Looking at the HTML structure provided above, I am seeking to determine the index of the hyp ...

jqueryhtmlindexing

JavaScript for Altering Viewport/Screen Width

Lately, I've been experimenting with creating a responsive button for our new website. The goal is to adjust the body width to 460px, simulating how our site would appear on mobile devices. While researching, I came across a technique that utilizes if ...

javascripthtmlcssviewport

The image wrapping feature within a div element will only function properly when there are more than one line of text present

I have come across a strange issue that I am struggling to solve. I have an image within a div with the float: left; attribute, but this styling only seems to work when the div has more than one line of text. When the div contains just one line, it ends ...

htmlcss