Is there a way to organize divs to match the layout shown in the picture?

Can someone show me how to achieve this design? https://i.sstatic.net/xbrJC.png

I'm currently using bootstrap 4 and my current layout looks like this https://i.sstatic.net/o78ZN.png

This is the code I have so far:

<div class="col-2 row align-items-center">
  <div class="col-6">
    {{cart.quantity}}
  </div>

  <div class="col-6 text-left">
    <div class="col-12">
      +
    </div>

    <div class="col-12">
      -
    </div>
  </div>

Could someone please point out any mistakes in my code?

cssbootstrap-4

Answer №1

In order to fix this issue, you should consider reducing the size of the divs or adding an icon class. Currently, your background and radius are extending across the entire width of the div element 

<div class="col-12">+</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

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

htmlcssbootstrap-4

Ways to trigger the display of an image upon hovering over a button without using inheritance

<div class="a"> <img class="img_c" id="img_id" src="~~"> <div class="b"> <div class="c"> <ul class="d" id="e"> <li ~~~ > </ul> </div> </div> </div> Is there a way to display the ...

css

Challenges encountered with the css dropdown menu when hovering over li elements

Occasionally, I encounter a problem with my menu. Hovering over the "produkter" menu item should trigger a submenu to appear. Most of the time, I am able to navigate down the submenu with my mouse cursor. However, on some occasions, the submenu disappears ...

htmlcss

Bootstrap-enhanced JavaScript table filter functionalities

Hello, I am facing an issue with the table filter functionality. It seems to be working fine, but when I search for a name like "John" and there are multiple instances of "John" in the table, there is some blank space between the tables. I suspect the prob ...

javascriptphphtmlcssbootstrap-4

Setting the distance between marks on a material-ui slider is a handy customization feature to

I have customized a material-ui slider with some custom CSS and it is contained within a div of small width, requiring overflowX. How can I maintain a 5px margin between each mark on the slider? Check out the demo here https://i.sstatic.net/bxiXE.png Th ...

javascripthtmlcssreactjsmaterial-ui

Guide to stacking blocks on top of each other

How can I create even spacing between blocks of different heights? For instance, in the image below, you can see that block 2 should be positioned directly under block 1. https://i.stack.imgur.com/RnYbP.png https://i.stack.imgur.com/LHvlz.png ...

htmlcss

Target specific content for printing with CSS (media query)

Currently, I am working on creating a print media query in order to only print specific content from the screen: <div> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry' ...

htmlcss

What is the best way to repair a table header?

How do I make the table header fixed so only the table body scrolls? * { padding: 0px; margin: 0px; } body { padding: 0px; margin: 0px; } .responsive { max-width: 100%; height: auto; } /* Other CSS code here */ /* Include necessary exter ...

jqueryhtmlcssbootstrap-4fixed-header-tables

Tips for identifying the correct selectedIndex with multiple select elements present on one page

How can I maintain the correct selectedIndex of an HTMLSelectElement while having multiple select elements in a loop without any IDs? I am dynamically loading forms on a webpage, each containing a select element with a list of priorities. Each priority is ...

javascriptjqueryhtmlcss

The functionality of jQuery plugins does not seem to extend to content loaded via Ajax

Hello everyone, I have encountered a frustrating issue. I am currently utilizing bootstrap 2.3 along with some jQuery plugins for form styling and other purposes. However, I've noticed that when I load ajax content, particularly select elements, the ...

jquerycssajax

Click anywhere on the body to conceal this element

I am currently working on a website where I have implemented a hidden menu that is functioning correctly. However, I want to make it so that when the menu is visible, users can click anywhere on the body to hide it. Unfortunately, my current code is not w ...

jqueryhtmlcssmenufullpage.js

Emphasis and dimension of form

I need help with a field that is supposed to have a black outline, similar to the one shown below: However, here is what I currently have in my code: .r{ height: 40px; font-size: 30px; width: 100px; font-family: 'proxima_novalight ...

htmlcssformsinputfield

Unable to add a border to the thumbnail containing text

Is there a way to achieve a nice border on my thumbnail section below? I attempted using a container but it resulted in the text overflowing on md or sm screen widths. <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset ...

htmlcsstwitter-bootstrap

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

I am attempting to use the navbar component from Twitter Bootstrap 4 with a nested sub menu, but the arrow in the menu item that has a sub menu is not appearing at all, and I am unsure why. Here is where the arrow appears: https://i.sstatic.net/J6xI4.jpg ...

htmlcssbootstrap-4asp.net-core-2.0

Animating links with multi-line effects on :before.orEnhancing

As per the given query, I have a code snippet Is there any way to apply this effect to multiple lines of text instead of just one line? Currently, the effect only appears on one of two text lines (as shown in the example). :root { --00a3a3: #00a3a3; ...

cssanimation

Adjusting the dimensions of a Bootstrap modal containing a YouTube video

Here is the code snippet I am working with: <div id="MainV3_VideoModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-b ...

cssbootstrap-4bootstrap-modalbootstrap-5

Tips for eliminating the gap between a heading and column in Bootstrap 4

.rowHeight{ height: 100px; } .padding-0 { padding-right: 0px; paddig-left: 0px; margin-left: 0px; margin-right: 0px; } .cart{ ...

htmlcssbootstrap-4

Can Bootstrap be used to emphasize changed input text?

Is there a feature or customizable tool that can visually highlight input elements when they have been changed? This could involve applying a distinguishing visual cue, such as an orange border, to any input that no longer contains its default value. To ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

How can I show pagination links as buttons on a gridview in ASP.NET?

When working on asp.net web forms, I encountered an issue where I was unable to display pagination links as buttons with a gray background on the grid view control. To achieve this, I needed to assign a CSS class to the pager style on the grid view in ord ...

cssasp.netbootstrap-4gridview

Can you identify the missing piece in my design?

#container { width: 250px; margin: 0 auto; } .group { border: 1px solid grey; margin-bottom: 20px; } .group p { text-align: center; font-family: Helvetica sans-serif; font-size: 25px; color: #2e3d49; } .group img{ wid ...

htmlcssimage