Remove background colour/border of button

[designm19985728]

Trying to tidy up something i have made. Its for a portfolio page, i would like it so there isn't a line border or background colour around the image.

(ignore the image, just filler)

html is:

<button type="button" data-toggle="modal" data-target="#myModal4"> <img class="card-img-top" src="images/testpic.jpg" alt="Card image cap"> </button>

if i remove the <button> the image increases in size and the border disappears, so thats why I'm assuming its to do with <button>

but i can't find anything in the bootstrap css under 'button' that would help me do this.

[osgood_ · Accepted solution]

What you are seeing is the default border and padding on the <button>.

You can clear that by using the Bootstrap utilities classes for padding and border, as shown below in red.

<button type="button" class="border-0 p-0" data-toggle="modal" data-target="#myModal4"><img class="card-img-top" src="images/testpic.jpg" alt="Card image cap"> </button>

alternatively you can use some custom css to target the button element (although this will be applied to ALL buttons on your page, which you might not want)

button {

border: none;

padding: 0;

}

You could add a custom class to the button (myButton) as below:

<button type="button" class="myButton" data-toggle="modal" data-target="#myModal4"><img class="card-img-top" src="images/testpic.jpg" alt="Card image cap"> </button>

Then use the below css selector in your custom css stylesheet, if you have one linked to the page.

.myButton {

border: none;

padding: 0;

}

Do NOT attempt to alter the default Bootstrap css file. If you need to alter the css attributes for any Bootstrap element or component and can't find a Bootstrap utility class, which is suitable, then use a linked custom css stylesheet.

Not sure what it is you are trying to do but that might help resolve your immediate issue. I dont know if you should be putting an image inside a button tag, never attempted it myself and have zero idea if the spec allows it. If it does fine, if not then best to seek an alternative solution like an anchor tag.