Is the Button Class failing to retrieve the entire length of the div element?

I'm having an issue with the full length of the div not applying to the button inside. Can someone help me troubleshoot this problem?

<div class="col-md-3 col-sm-6 text-center card">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">  
     <span class="icon">
        <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}" 
             alt="Classroutine" style="width:50%; 
             height: 93.3px; padding-top: 15px; padding-bottom: 25px">
      </span>
      <div style=" padding-bottom: 10px; padding-top: 20px">
            <h3>Class <br> Routine</h3> 
       </div>
   </button>
</div>

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

cssbootstrap-4

Answer №1

Make sure to update the CSS for your elements: 

.card {
    padding-right: 0px;
    padding-left: 0px;
}
.block {
    display: block;
    width: 100%;
}

If you want to adjust the width of the parent div, you can modify the bootstrap column size. For instance, change from col-md-3 to col-md-6:

<div class="col-md-6 col-sm-6 text-center card">

Answer №2

When using bootstrap, the columns come with default values of padding-right: 15px; and padding-left: 15px;. To ensure that your button takes up the full width of the column, you can either override these css properties or apply the following css to your button:

Check out the demo below:

.block {
  margin-right: -15px;
  margin-left: -15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js></script>
  <div class="col-md-3 col-sm-6 text-center card>
  <button type="button" class="block" data-toggle="modal" data-target="#myModal>  
     <span class="icon>
        <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}" 
             alt="Classroutine" style="width:50%; 
             height: 93.3px; padding-top: 15px; padding-bottom: 25px>
      </span>
      <div style=" padding-bottom: 10px; padding-top: 20px>
            <h3>Class <br> Routine</h3> 
       </div>
   </button>
</div>

Answer №3

Apply the display property with a value of inline-block to both the "span" element and the following "div" element.

Answer №4

Adjust the column div's padding:

.card{ padding:0px}

Check out the code snippet below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
      .card{ padding:0px}
      </style>
  </head>
  <body>
    <script src="script.js"></script>
    <div class="col-md-3 col-sm-6 text-center card">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">  
     <span class="icon">
        <!-- <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}" 
             alt="Classroutine" style="width:50%; 
             height: 93.3px; padding-top: 15px; padding-bottom: 25px"> -->
      </span>
      <div style=" padding-bottom: 10px; padding-top: 20px">
            <h3>Class <br> Routine</h3> 
       </div>
   </button>
</div>
  </body>
</html>

Answer №5

In Bootstrap, all columns with the class .col-* come with default padding on the x-axis (padding-right: 15px; and padding-left: 15px;).

If a button is the only child element within a column and you want to maintain the styles of the class without overriding them, you can utilize the px-0 or p-0 class on that specific column to eliminate the padding:

<div class="col-md-3 col-sm-6 text-center card px-0">
...
</div>

Answer №6

<div class="col-md-3 col-sm-6 text-center card">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" style="width:100%">  
     <span class="icon">
        <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}" 
             alt="Classroutine" style="width:50%; 
             height: 93.3px; padding-top: 15px; padding-bottom: 25px">
      </span>
      <div style=" padding-bottom: 10px; padding-top: 20px">
            <h3>Class <br> Routine</h3> 
       </div>
   </button>
</div>

Apply width:100% as a style or include it in a class that can be added to the button for the desired effect

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

Answer №7

If you want to eliminate padding, simply set it to zero.

    <div class="col-md-3 col-sm-6 text-center card px-0" style="padding: 0px ">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#classRoutine" style="width:100%">  
         <span class="icon">
            <img src="{{ URL::asset('frontAssets/assets/images/classroutine1.png')}}" 
                 alt="Classroutine" style="width:50%; 
                 height: 93.3px; padding-top: 15px; padding-bottom: 25px">
          </span>
          <div style=" padding-bottom: 10px; padding-top: 20px">
                <h3>Class <br> Routine</h3> 
           </div>
       </button>
     </div>

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 with fonts in Google Chrome Version 32.0.1700.76 m

After recently updating my Google Chrome browser, I noticed that some of the fonts are not displaying correctly. Interestingly, they appear fine on other browsers, but the issue only seems to occur in Chrome v32.0.17...76 m. The fonts I used were "Open Sa ...

htmlcssgoogle-chromefontsgoogle-font-api

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

I am facing an issue with a list of ion-cards that have clickable icons appearing when you hover over them. The problem is that due to the floating nature of the icons, they are not positioned correctly (as shown in the image below) and end up getting cove ...

cssangularionic-frameworkionic5

Unable to set the height of WebDataRocks as a percentage

I've recently started using WebDataRocks and I'm having trouble getting the height to fill the window. Despite what the documentation says (), which states, "The height of the pivot table in pixels or percent (500 by default)". The code snippet ...

csspivotwebdatarocks

Buttons fail to function properly when inserted into Popover

I'm attempting to add 2 buttons to a popover triggered by the .clear-history button: <div class="modal-footer text-nowrap"> <button type="button" class="clear-history btn btn-link">Clear history</button> </div> const c ...

javascriptjquerytwitter-bootstrapbootstrap-4bootstrap-modal

Tips for Utilizing Border-Radius in Safari

What is the best way to hide a child element's corners within its parent (#div1) Ensuring that the child does not overflow its parent container? ...

csssafari

Prevent text from wrapping when using jQuery to animate font size

I have a unique way of showcasing content in a preview format by utilizing em units for scaling and adjusting the root font size to increase or decrease. When users click on the preview, the full content is revealed with an animation that scales the font s ...

javascriptjqueryhtmlcss

Is there a specific CSS selector that targets elements with "multiline" content?

My website has a menu that displays with the following CSS: a { background:red; } <a href="#">Home</a> <a href="#">Downloads</a> <a href="#">Contact</a> <a href="#">FAQ</a> <a href="#">Disclaimer&l ...

htmlcss

What is the best way to get my loading screen div to cover the entirety of my screen, including all content beneath it?

In order to create a loading screen, I am utilizing PHP to dynamically load specific services for my website. I attempted to set the height of my wrapper div to 100% but it did not produce the desired results. After that, I experimented with setting the he ...

phphtmlcss

Instructions on adding a class to a span within a div upon clicking the div

Is there a way to dynamically add a class to the span element inside a specific div when that div is clicked? There are multiple divs and spans with the same class name. $('.menu_item_conteiner').click(function() { $('.menu_item_conteiner ...

jqueryhtmlcss

Using AngularJS to incorporate personalized font icons

Looking to create a custom font icon library similar to "Font Awesome" for my AngularJS project, as using fonts instead of images is more versatile across devices. Is there a way to achieve this? I have generated a font in .ttf and .svg formats with my ...

cssangularjsfont-facefont-awesomeglyphicons

Thumbnails failing to line up in a continuous row

Having an issue creating a row with 3 thumbnails as they are not aligning in a single row, instead each thumbnail is going into a different row. echo "<table>"; echo "<tr>"; echo "</tr>"; while($r ...

phphtmlcssrowthumbnails

Troubleshoot: Font Rendering Issue with CSS3 @font-face in Opera 11.x

Having some trouble with Opera not displaying my HTML5 site correctly. Everything looks good in Safari, Chrome, IE9, Firefox 3.5+ and more. Wondering if anyone has encountered this before and found a solution. Here's the breakdown of my setup: In the ...

cssoperafont-face

Resizing a column to match the dimensions of a grid of pictures

Imagine you have a website structured like this. #left_column { width: 200px; } <div id="left_column"> /* some content */ </div> <div id="right_column"> /* A series of photos each with a width of 100px and floated */ </div> In t ...

javascripthtmlcss

What are some ways to expand the width and increase the spacing of bootstrap cards?

On my website, I have created Bootstrap cards that are displayed on two different pages. One set of cards is shown on the landing page, where I am looking to increase the spacing between them. The other set appears on the books page, and I want to make t ...

csslaraveltwitter-bootstrap

Why are the HTML links generated by JS not opening in Chrome?

<a href='http://www.xyz.hu/xyz' alt='Kosár' title='Kosár'>Megtekintés</a> Additionally: - A setInterval function refreshes the sibling's content every second, although it should not affect this specific el ...

javascriptjqueryhtmlcss

Elevate a div over another div

I have a situation where I need to nest two divs inside another div with the ID "video-wrapper". Here is the HTML code: <div class="row"> <div class="video-wrapper col-lg-2"> <div class="video-thumbnail"> <img ...

jqueryhtmlcss

How can you use CSS animations to animate two images in a way that hides one while showing the other?

click here for the image link visit this webpage for the link I need I am looking to add an animated section to my website. The inspiration comes from the webpage linked above, where images slide down one after another in a seamless manner. I attempted t ...

javascripthtmlcss

Creating Unique Designs with Multiple Shapes and Elements using Clipping Masks

I have a design piece to create that I initially built using three separate square div containers with independent background images. However, this method feels rigid to me as it requires chopping up and restaging a new image each time it needs to be chang ...

javascripthtmlcssmaskingimage-clipping

Any tips or hacks for successfully implementing vw resizing on the :before pseudo-element in webkit browsers?

When using vw sizes on webkit browsers, a well-known bug can occur where they do not update when the window is resized. The typical workaround for this issue has been to employ javascript to force a redraw of the element by reassigning the z-index upon res ...

javascriptjqueryhtmlcsswebkit

What is the best way to utilize nav and main-nav in CSS?

Working with HTML and CSS <nav class="nav main-nav"> </nav> Styling with CSS main-nav li{ Padding:0 5% } I am a beginner in HTML and CSS and facing an issue. I noticed that when using main-nav in CSS, I'm not getting the de ...

htmlcssclass