Creating a Bootstrap anchor element and button without any gaps

In my Bootstrap 3 project, I have a row of buttons. One of them is an <a> button with the following code: 

<a class='btn btn-default' role='button'>Button here</a>
; while the others are all <button> elements styled in the same way.

I anticipated that they would all be properly aligned and spaced out, similar to the examples shown in Bootstrap's documentation. However, this was not the case, as illustrated below:

https://i.sstatic.net/3kW6a.png

Clearly visible in the image, the first button specified as <a> does not have the correct margin with respect to the next button. What could be causing this issue?

Here is the HTML code I am using:

<a class="btn btn-default" role="button">
   <i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
   <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
htmlcsstwitter-bootstrap

Answer №1

The spacing between the anchor tags and buttons is done correctly because they are set as inline-block. It's puzzling how there is no gap between the a tag and the button element in your code snippet.

If you want to eliminate the space between them, consider using the float property and adjust the margin if necessary.

By default, they should be properly aligned and spaced as shown in the example below:

a.btn, button.btn {
  margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet>
<body>
<a class="btn btn-default" role="button">
   <i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
   <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
  </body>

Let's see the effect when we apply float:

a.btn, button.btn {
  margin: 0;
  float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">>
<body>
<a class="btn btn-default" role="button">
   <i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
   <i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export </button>
<button class="btn btn-danger">Delete</button>
  </body>

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

Issues have been reported with the SVG filter URL functionality in Angular 4

Hey there! I'm currently working on drawing a line using SVG in Angular and incorporating some filters for glow effects. However, I've run into an issue where the filter URL is not functioning properly in the browser - nothing is being displayed ...

htmlcssangularsvg

Changing the color of the navbar for different viewport sizes in Bootstrap v4

I recently made the switch to Bootstrap V4 and I am currently customizing the starter template provided at: My goal is to make the navbar transparent, but have it change to a dark color when the viewport size is sm or xs. Despite my efforts to achieve th ...

htmlcsstwitter-bootstrap-4

Having three adjacent divs with a full height and scrolling layout may not be compatible with all web browsers

After experimenting with various samples, I have managed to create a layout that works well in Chrome. However, I am facing compatibility issues with FireFox and IE. My goal is to set up 3 side-by-side divs with a height of 100% and a width around 30%. Th ...

htmlcsslayout

Is it possible to include a relative URL with a different port number in a hyperlink?

Is it possible to link to a different port number on the same server without using Javascript or server-side scripting, especially if the hostname is unknown? For example: <a href=":8080">Check out the other port</a> (Note that this example ...

html

Obtain numerous results using the SELECT feature in Django Templates

Need help with extracting multiple values from a drop-down option selection in Python (3.6) & Django (1.10). This is what I've attempted: In the template: <select id="slc" name="cluster"> <option value="{{cluster.name}}#{{cluster.zone}}"> ...

pythondjangohtmldjango-views

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...

jquerycss

Attempting to make initials fade and slide out upon mouseover using jQuery

I've been experimenting with jQuery to create a unique effect where hovering over my initials in the header expands the containing div and reveals my full name letter by letter. However, I'm facing some challenges and could use some guidance on t ...

javascriptjqueryhtmlcss

Should the header include individual CSS and JS files, or should all code be contained within a single CSS and JS file?

As I work on optimizing my website, I find myself juggling multiple plugins that include jQuery plugins with CSS along with my own JavaScript code. Currently, the CSS is spread across separate files for each plugin I have downloaded. When needed on a page ...

javascriptjquerycssperformanceoptimization

Switching out the browser's scrollbar for buttons

I've been searching online for a solution, but so far I haven't found anything. Although, I'm pretty sure I've come across something similar to what I need before. Essentially, I have a large table created by the user that will likely ...

javascripthtmlcssangularjs

Text box size in user input not adapting on mobile devices

Website: Visit the Cutter Travel Calculator here I've encountered an issue with my user input text boxes on mobile. Despite setting their width using the formidable forms plugin, the size adjustment doesn't seem to apply when viewed on mobile de ...

javascripthtmljquerycsswordpress

Introducing Bootstrap 5 with a sleek two-column layout that effortlessly allows text to wrap around captivating images

Struggling to find a solution for implementing two columns in a row? Look no further! In the left column, insert an image with classes md-3 or lg-4. In the right column, place a lengthy text using classes md-9 or lg-8. If you want the text to wrap around ...

cssflexboxrowcss-floatbootstrap-5

Search through a complex hierarchy of nested unordered lists and list items using an input field, reverting to the initial state if the

I am facing a challenge with a JSON object that I utilize to create a tree view using lists. The structure of the JSON object is as follows; const data = [ { "name": "Node 1", "children": [ { "name": "Node 1.1", "children": ...

javascripthtmlarraysfilter

What is the interaction between CSS and URL fragments (the #stuff)?

Can URL fragments affect CSS behavior? For instance, let's consider a sample page at: http://example.boom/is_this_a_bug.html. You can view the code for this page on https://gist.github.com/3777018 Upon loading the page with the given URL, the element ...

cssurlfirefoxchromium

The style in App.js was rejected and the script was not executed as intended

element, I have encountered a common issue that many others seem to face. The typical solution involves correcting a line of code like this one: app.use(express.static(__dirname + '/public')); Unfortunately, despite my efforts to follow the ad ...

javascripthtmlcssnode.jsexpress

The full width of Bootstrap 4 Navbar column is not 100% complete

My BS 4 Navbar displays perfectly on Desktop, but when switching to mobile, the column within the navbar fails to fill the entire space, resulting in less than 100% width. This issue is highlighted by the purple area in the screenshot below: https://i.sst ...

cssbootstrap-4flexbox

Seeking assistance in the development of a visual depiction of device orientation through JS

My goal is to visually represent the device orientation values alpha, beta, and gamma by creating a series of "bars" for each value. Currently, I have managed to display only the values in plain text using innerHTML. However, I envision these bars moving i ...

javascriptcss

Keeping content in the middle of the page

When working with a div tag, I encountered a challenge. <div id="length"></div> My goal is to center the contents of the div while also decreasing its width to hold a number. #length{ background:black; color:white; border:3px solid gr ...

htmlcss

Tips for preserving CSS formatting during printing from a designated section of a webpage

When I try to print a specific section of my webpage, all the CSS styles are getting removed. Here is my HTML document: const button = document.createElement('button') //this is the print button button.classList.add('printButton') but ...

javascripthtmlcss

Validating Date Input in HTML and JavaScript Text Fields

When designing my form, I wanted to ensure that users could only input digits and hyphens in a text field where they enter a date. However, I encountered some difficulty implementing this feature. Currently, the field only accepts digits and removes any le ...

javascripthtml

Choosing particular contenteditable divisions using jQuery

Consider the following HTML structure for a specific type of blog post editor: <div class="entry"> <div class="title" contenteditable="true"> <h2>Title goes here</h2> </div> <div class="content" contenteditable ...

javascriptjqueryhtmlcsscontenteditable