Issues with the functionality of the bootstrap grid system when used within elements

I'm struggling with my button group layout that should display 3 buttons in a row. Each button is a regular bootstrap button with an icon image. However, when I try to use spans within the button's grid, the icon image gets displaced.

This is the HTML:

<div class="container-fluid">
      <div class="row">
          <div class="col-md-6>
           <div class="row">
                 <div class="btn-group order-type-buttons col-12" 
                 role="group" aria-label="First group">
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Online Pick Up</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/online-pickup-icon.png" alt=""></span></button>
    <button type="button" role="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Online Take out</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/online-take-out-icon.png" alt=""></span></button>
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Pick up</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/pick-up-icon.png" alt=""></span></button>
</div>
<div class="btn-group order-type-buttons col-12" role="group" aria-label="second group">
    <button  type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Refund</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/refund-icon.png" alt=""></span></button>
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Room Service</span><span class="col-4 span-img"><img class="img-fluid" src="images/icon%20files/room-service-icon.png" alt=""></span></button>
    <button type="button" class="btn order-type-btn-blue col-4"><span class="col-8 button-text">Take</span><span class="col-4 span-img"><img class="img-fluid rounded" src="images/icon%20files/take-out-icon.png" alt=""></span></button>
</div>
           </div>
          </div>
      </div>
</div>

This is the CSS:

.button-text{
    padding-left: 0;
    padding-right: 0;
}

.order-type-btn-blue{
    background-color: #0082d5;
    font-size:14px;
    color: white;
    text-transform: uppercase;
    margin: 2px 2px 2px 2px;
    padding-right: 0;
    padding-left: 0;
}
.order-type-buttons {
    padding-right: 0;
    padding-left: 0;
}
.span-img{
    padding-right: 0;
    padding-left: 0;
}

Here's how the buttons are appearing on my page:

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

csshtmltwitter-bootstrapbootstrap-4

Answer №1

It's crucial to pay close attention to Bootstrap's HTML markup. Neglecting it can cause unexpected issues.

The key to understanding a Bootstrap "grid" is ensuring that it must contain the class row and its direct children should have classes like col-*. In simple terms, columns must be enveloped within rows. Failing to adhere to this structure will lead to undesired outcomes.

If you wish to further segment a .col-* element, you must nest a .row element inside it and insert additional smaller .col-*s within that nested .row.

Moreover, significant (layout) .rows should be immediate children of either a .container or .container-fluid. While nesting .containers within .container-fluids is acceptable, nesting .containers within other .containers is not permitted.

If you carefully examine all the aforementioned "rules," you'll observe that they are followed in all examples, even though they are not explicitly outlined anywhere. However, taking the time to analyze the CSS properties applied by each class makes their logic clear.

For instance: 

.order-type-buttons > .btn:not(#_){
    font-size:14px;
    color: white;
    text-transform: uppercase;
    padding-right: 0;
    padding-left: 0;
    flex-grow: 1;
}
.order-type-buttons > .btn > span {
display: flex;
    justify-content: space-between;
}
.button-text.col {
  flex-grow: 2;
}
.span-img img {
  margin: -7px 0;
  height: 5rem;
  flex-grow: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="btn-group d-flex order-type-buttons" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary">
          <span class="row align-items-center no-gutters w-100">
            <span class="col button-text">Online Pick Up</span>
            <span class="col span-img d-block">
              <img class="img-fluid" src="https://dummyimage.com/80x80/007bff/fff" alt="">
            </span>
          </span>
        </button>
        <button type="button" role="button" class="btn btn-primary">
          <span class="row align-items-center no-gutters w-100">
            <span class="col button-text">Online Take out</span>
            <span class="col span-img d-block">
              <img class="img-fluid" src="https://dummyimage.com/120x80/007bff/fff" alt="">
            </span>
          </span>
        </button>
        <button type="button" role="button" class="btn btn-primary">
          <span class="row align-items-center no-gutters w-100">
            <span class="col button-text">Pick up</span>
            <span class="col span-img d-block">
              <img class="img-fluid" src="https://dummyimage.com/640x360/007bff/fff" alt="">
            </span>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>

It's worth noting that .btn applies white-space: nowrap to all its descendants, which may not always align with your intentions.

Answer №2

To enhance your layout, it is recommended to opt for a block element like div instead of an inline element such as span. This will allow for better functionality with properties like margin and overflow. To align content horizontally on the same row, utilize d-flex justify-content-center, and for vertical centering, use align-items-center. Implement text-truncate to prevent overflow and include ellipses (...) at the end of the text. For transforming text to uppercase, employ text-uppercase. Hopefully, this advice proves helpful!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-12 d-flex">
    <button type="button" class="btn btn-primary col-4 d-flex justify-content-center align-items-center" data-toggle="button">
      <div class="col-8 text-uppercase">Online Pick Up</div>
      <div class="col-4"><img class="img-fluid" src="https://picsum.photos/50" alt=""></div>
    </button>
    
    <button type="button" class="btn btn-primary col-4 d-flex justify-content-center align-items-center" data-toggle="button">
      <div class="col-8 text-uppercase">Online Take Out</div>
      <div class="col-4"><img class="img-fluid" src="https://picsum.photos/50" alt=""></div>
    </button>
    
    <button type="button" class="btn btn-primary col-4 d-flex justify-content-center align-items-center" data-toggle="button">
      <div class="col-8 text-truncate text-uppercase">Online Something Text Pick Up</div>
      <div class="col-4"><img class="img-fluid" src="https://picsum.photos/50" alt=""></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

I am encountering a 'Cannot GET /index.html' error when running my Node.js and Express application, even though I do not have an index.html file

I'm puzzled by the error I'm encountering. Everything runs smoothly on my local machine, but when I try running it on Linux, this error pops up. I've already created ejs files and included all necessary components. Additionally, there is no ...

htmlnode.jslinuxexpressejs

Utilizing AJAX to retrieve data from a MySQL database upon clicking a button

Hello everyone, I am fairly new to the world of PHP and AJAX, so please bear with me. I am currently attempting to retrieve MySQL results using AJAX. I have made some progress thanks to the information I have gathered from various sources on the internet. ...

javascriptphphtmljquerywordpress

Center the background image and adjust it vertically up or down as needed

I am experiencing an issue with a slider div that has a background image on it. The background image is too large, so it is currently centered. You can see the issue here: http://jsfiddle.net/s5qvY/ <div id="slider"></div><hr><hr>& ...

htmlcss

Adding various image files to the canvas

I am facing an issue with my code where I need to find images inserted by the user into a div and then combine them into one image in a canvas when the "snap" button is clicked. While I can successfully locate, position, and resize the images inside the ca ...

javascripthtmlcanvasdrawimage

What is the process of adding a phone number with an extension on an iPhone web application?

When building a web application, inserting the following number: <a href="tel:888-123-4567">call now</a> The iPhone will automatically convert that link into an instant call function when clicked. But what should I do if the number includes ...

htmliosphone-numberphone-call

Struggling to change the div content with ajax response transmitted through php

I would like to apologize in advance if this question has already been addressed elsewhere. After conducting a search, I came across several relevant posts that have guided me to this point. Below is the form snippet containing 1 input box, a button, and ...

javascriptphpjqueryhtmlajax

Arrange css3 menu circles to be displayed next to each other

I have managed to figure out most aspects of these circles except for how to arrange them side by side. Currently, they are stacked on top of each other. I have successfully determined the colors, fonts, text positions, and other details with some assistan ...

htmlcss

What is preventing the div container from extending to its full width?

The content on the right side of this div container is struggling to reach full width for some unknown reason. Click here to see an image of the issue. The right column is not extending to full width. This snippet shows my CSS code. The 'main-conte ...

htmlcsscontainersalignmentwidth

Creating a modal dialog using a function in a TypeScript file

Hey there, fellow developers! I have a question that might seem simple. So, in my HTML code I've got a Modal Dialog that pops up using ng2 Bootstrap. It's working fine, but... I want to replace this line of code "<button class="btn btn-prim ...

angularjstwitter-bootstraptypescriptmodal-dialog

Creating line breaks for ToolTip titles in Material-UI can be achieved by using the appropriate syntax and

I am currently working with the ToolTip component and I have a query regarding displaying two lines for the title text - one line for each language rather than having them displayed on a single line. Is it possible to achieve this and how can I style the c ...

javascripthtmlcssreactjsmaterial-ui

Collecting *every single* link from a specified webpage and subsequently performing a keyword search on them

Just dipping my toes in the world of python language. I'm on a quest to gather all the links from a particular web page: Attempting to extract links using a python script from the following page: https://web.archive.org/web/*/ I'm particularly ...

pythonhtmlseleniumbeautifulsoup

"Maximizing battery life: Efficient video playback on iOS in low power

Summary: I am currently working on a website that features a video set as the background which autoplays. However, I have encountered an issue on iOS devices when "Low Power Mode" is activated - the video fails to play and instead displays a large "Play" i ...

javascripthtmlcssioswordpress

php$json_data = json_decode($response);

I am brand new to PHP coming from a background in Python. I was fairly comfortable with retrieving JSON results from websites in Python, but for some reason, I can't seem to get it working in PHP. Here is the code snippet I'm using: <?php $ ...

phphtmljson

Reducing the size of CSS classes and IDs

I am searching for a way to automatically compress classes and ids in an .html file. This specific file is generated through a sequence of gulp commands. I attempted to use the Munch command line application, but it had adverse effects on the file by elimi ...

cssnode.jsgruntjsnpmgulp

Step-by-step guide on concealing elements and subsequently displaying them upon clicking the containing DIV

It's a bit tricky to explain without visuals, so I suggest checking out the JSFiddle link provided. Essentially, when a specific div is clicked, it should expand to reveal some inputs and buttons. However, the issue I'm facing is that upon loadin ...

javascriptjqueryhtmlanimationjquery-animate

Radio buttons in 'Block Style' functioning perfectly on all devices except for iPad

I am facing an issue with a group of radio buttons that I have styled to display as block elements, making them look like buttons while hiding the actual radio button itself. This setup works perfectly on Chrome and Firefox on desktops and Android tablets, ...

htmliosipadcss

Align boxes in the center within a DIV container

Here is the box design that I have created: https://i.sstatic.net/3rtcn.jpg The green color boxes are generated dynamically inside a "col-md-10" div. If there are less than 3 boxes in the second row, I would like to center align them. For example, in thi ...

javascriptjquerycsstwitter-bootstrap

I'm struggling to make my div display inline

My div elements are not displaying inline, I'm thinking maybe I shouldn't use the nav and div structure like this. But starting over again seems like a lot of work. How can I fix this issue? Just so you know, I'm only on my 4th day of learn ...

htmlcss

Uneven column widths in Bootstrap 4 tables

I'm updating a project to Bootstrap 4. Previously in Bootstrap 3, all three columns were the same width. However, in Bootstrap 4, the first column is wider while the other two columns are squished together on the far right side. Here is how it looked ...

htmllayouthtml-tablebootstrap-4

Guide to Integrating BLK Theme into an Angular CLI Project

I've recently set up an Angular project using CLI and I am interested in integrating the BLK theme by Creative Tim into this project. However, the only available option from Creative Tim is to download a pre-existing project and build upon that framew ...

angulartypescriptbootstrap-4