I am facing an issue with implementing Bootstrap 4 inline-block links. There seems to be an invisible margin between them that I cannot remove.
Screenshot:
View the Codepen example here.
Code:
<div>
<!-- There shoud be NO MARGIN between the links -->
<a href="#" class="btn btn-danger">
Button A</a>
<a href="#" class="btn btn-secondary like-button">
Button B
</a>
</div>
How can I eliminate these unseen margins?
If you're unsure about which direction to take, consider utilizing a Bootstrap Button Group for your project.
<div class="btn-group" role="group" aria-label="Basic example">
...your buttons go here
</div>
For more information, visit the documentation.
Here's a demonstration:
/*SAMPLE CSS FOR ILLUSTRATION PURPOSES ONLY*/
body {
padding-top: 50px;
text-align: center;
}
/*SAMPLE CSS FOR ILLUSTRATION PURPOSES ONLY*/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic example">
<a href="#" class="btn btn-success">Option 1</a>
<a href="#" class="btn btn-primary custom-button">Option 2</a>
</div>Integrate a fresh style to the button by including a new CSS class and applying the following margin property:
margin: 0 -4px 0 0;
You can view an example on Codepen at this link
The reason for this issue is that the buttons are set to display as "inline-block."
Instead of a margin, there is actually a space between them. This can be resolved by eliminating the space or line break between each tag:
<button>first</button></button>second</button>
The issue was traced back to a line break in the HTML code, specifically between the links. It is unclear whether this break was intentional or caused by a browser bug. Nevertheless, removing the line break resolved the problem:
<div>
<!-- Corrected: NO MARGIN between the links -->
<a href="#" class="btn btn-danger">
Button A</a><a href="#" class="btn btn-secondary like-button">
Button B
</a>
</div>
My goal is to create a cohesive look for the entire page by applying a background gradient to all layers. #myDIV { width: 400px; height: 400px; background-image: linear-gradient(-45deg, rgba(251, 234, 188, 1) 0%, rgba(0, 114, 136, 1) 100%); } .bl ...
Trying my hand at crafting a FAQ dropdown menu using bootstrap collapse. I've set up the collapse like this: <div class="container textcontainer accordion" id="accordionExample"> <div class="card"> <div class="card ...
I've been working on a form where the user can fill in an input and press enter to move to the next field. Although I have managed to get the functionality to show the next div, I am facing issues with validation... // Moving to next div on Enter ...
Currently, I am facing an issue with getting a section header to stay fixed at the top of a wrapper div. The challenge lies in the fact that the wrapper div must have a specified height and overflow set to scroll. I came across this example (jsfiddle) tha ...
As I delve into the realm of CSS animation, my primary focus is on replicating the captivating card shuffling animation showcased at Here's a glimpse of the progress I've made so far: https://youtu.be/GDIJ2K22cnY While I've successfully im ...
Check out my nested ul list: <ul> <li> <a href="/"></a> </li> <li> <a href="/"> </a> &l ...
Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...
I am currently working on a CSS3 pulsing circle (animating scale to 1.1). To address a jumpy animation issue in Firefox, I have added a slight rotation. animation: button_pulse 2s infinite ease-out; transform: scale(1.1) rotate(0.1deg); Despite this adju ...
Currently using the NPM build of Bootstrap (with Gulp) for a custom WordPress theme, and I seem to be facing some issues. While I am new to Bootstrap, I have previous experience with WordPress and Gulp (primarily with Foundation). Below is how I am includ ...
I have a simple bootstrap row containing two columns: <div class="row"> <div class="col-xs-7"> <p>Walking together</p> </div> <div class="col-xs-5" id="stay"> <p>Joyful journey</p> </div ...
I'm having trouble understanding why the overflow: hidden property is being overridden by a descendant element. Take a look at this example I've put together http://jsfiddle.net/2fRxc/. HTML <div class="relative"> <div class="overf ...
Is there a way to keep a div pinned to the bottom of the viewport while applying a filter to the body in CSS? I tried using position: fixed; bottom: 0px, but it seems to mess up the positioning when a filter is added to the body. body { filter: bright ...
I'm having trouble with a bootstrap layout. Here is the layout I need to achieve on different screen sizes: On mobile, I want: Title Image Text And on desktop, I want: Image Title Text However, the title div always takes up the image he ...
Below is my CSS code: .wrapper { display: inline-block; margin-top: 60px; padding: 15px; width: 100%; } I am looking to create a new class that inherits all the properties from wrapper and only changes the width property: .wrapper .exten ...
I recently set up a Woocommerce plugin on my fully functional custom Wordpress theme by following the instructions in this guide. I copied and modified the page.php file as instructed, renaming it to woocommerce.php. While the Woocommerce functionality wor ...
While many solutions exist on Stack Overflow for making columns equal height based on the largest content, I am specifically interested in making all columns equal height based on the smallest column. https://i.sstatic.net/Xlcyh.png In this scenario, my ...
I'm trying to implement a Parallax scrolling effect on my Bootstrap 4 slider. However, every time the slider switches to the next image, the image needs to readjust itself into place. How can I avoid this? .customOverlayText { position: absolute; ...
Is there a way to create a slideshow video gallery using CSS? I've looked everywhere but all I find are slideshow image galleries. If anyone has any resources or tips on how to do this, please share! This is the kind of video gallery I'm looking ...
I have implemented a feature where a popover appears when hovering over an inbox icon (font-awesome). However, I am facing an issue with displaying a button on the second row within the popover. The title is showing up fine, but the button is not appearing ...
Incorporating the image displayed above as a background photo in CSS is my current objective using Angular. My aim is to alter the photo path for each new item added to my list. As it stands, the styles are hardcoded, resulting in a constant image that fun ...