Bootstrap - Design Dilemma

I'm looking to accomplish something straightforward like this: https://i.sstatic.net/y84BI.jpg

Here is the code I have:

 <section class="info-bar info-bar-clean">
        <div class="container">

            <div class="row">
                <div class="col-md-11">
                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-credit-card"></i>
                        <h5 class="topbar-lh">Payment on Delivery</h5>
                    </div>

                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-refresh"></i>
                        <h5 class="topbar-lh">7 Day Free Returns</h5>
                    </div>

                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-shield"></i>
                        <h5 class="topbar-lh">Genuine Products</h5>
                    </div>

                    <div class="col-sm-3 hidden-xs">
                        <i class="fa fa-3x fa-truck"></i>
                        <h5 class="topbar-lh">Free Delivery Nationwide</h5>
                    </div>
                </div>
                <div class="col-md-1 col-xs-12">
                    <!-- BUTTONS -->
                    <ul class="pull-right nav nav-pills nav-second-main">

                        <!-- QUICK SHOP CART -->
                        <li class="quick-cart">
                            <a href="#">
                                <span class="badge badge-aqua btn-xs badge-corner">2</span>
                                <i class="fa fa-shopping-cart"></i>
                            </a>
                        </li>
                        <!-- /QUICK SHOP CART -->

                    </ul>
                    <!-- /BUTTONS -->

                </div>


            </div>

        </div>
    </section>

Now, when I attempt to create a dropdown on the cart like this:

 <li class="quick-cart">
      <a href="#">
           <span class="badge badge-aqua btn-xs badge-corner">2</span>
           <i class="fa fa-shopping-cart"></i>
      </a>
      <div class="quick-cart-box">
           <h4>Shop Cart</h4>
           <div class="quick-cart-wrapper">
                <a href="#"><!-- cart item -->
                     <img src="assets/images/demo/people/300x300/4-min.jpg" width="45" height="45" alt="" />
                     <h6><span>2x</span> RED BAG WITH HUGE POCKETS</h6>
                     <small>$37.21</small>
                </a><!-- /cart item -->
                <a href="#"><!-- cart item -->
                     <img src="assets/images/demo/people/300x300/5-min.jpg" width="45" height="45" alt="" />
                     <h6><span>2x</span> THIS IS A VERY LONG TEXT AND WILL BE TRUNCATED</h6>
                     <small>$17.18</small>
                </a><!-- /cart item -->
                <!-- cart no items example -->
                <!--
                     <a class="text-center" href="#">
                          <h6>0 ITEMS ON YOUR CART</h6>
                     </a>
                -->
           </div>
           <!-- quick cart footer -->
           <div class="quick-cart-footer clearfix">
                <a href="shop-cart.html" class="btn btn-primary btn-xs pull-right">VIEW CART</a>
                <span class="pull-left"><strong>TOTAL:</strong> $54.39</span>
           </div>
           <!-- /quick cart footer -->
      </div>
 </li>

The dropdown only displays correctly in "col-md-3" and appears distorted. Is there a proper way to achieve this with a smooth drop-down effect on hover?

Additionally, can the items be adjusted to fit the screen size instead of collapsing onto each other.

Thank you.

twitter-bootstrapcsstwitter-bootstrap-3responsive-design

Answer №1

For future reference, it would be helpful if you could provide a complete example. I have created a Bootply with the HTML code you supplied:

In this version, I included "position: absolute;" and set the width to 200px for the quick-card-box like so:

<div class="quick-cart-box" style="position: absolute; width: 200px">

However, it is recommended not to use inline CSS. Instead, add the position and width attributes to the quick-card-box class in your CSS file.

Here is the updated solution: http://www.bootply.com/MPUBu5YhB9

I hope this meets your needs. :)

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 unable to apply CSS to style my <div> element

I've run into a snag with my coding project, specifically when attempting to style my div. Here is the code I have so far: All CSS rules are applying correctly except for the .chat rule. Can someone help me figure out what I'm doing wrong? var ...

javascriptjqueryhtmlcss

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

When a React CSS class is deployed to a production server, it may be automatically

I've encountered a strange CSS issue while working on my React project. One specific section of the JSX <div> has a class with style properties defined in the main .css file. During local development, everything appears as expected. However, aft ...

javascripthtmlcssreactjsmaterial-ui

The functionality of CKEditor is compromised when used in conjunction with React Material-UI

I've been struggling with integrating Material UI and CKEditor5. The issue I'm facing is that CKEditor doesn't seem to be working properly. Despite trying to apply editor features like bold or italic, nothing changes on the screen. However, ...

cssreactjsmaterial-uickeditorckeditor5-react

Display a div when collapsing in Bootstrap for screen widths of 991px or smaller

I am currently working on optimizing the mobile version of my website using Bootstrap. There is a div element that is taking up too much space on the page, and I would like to hide it on page load for screen widths of 991px or less. I want users to have th ...

javascripthtmlcsstwitter-bootstrapmobile

centering items throws off the parent's height

I am working on creating a carousel-like feature that can be moved using a scrollbar. Each slide in the carousel contains a single line of text that needs to be centered both horizontally and vertically. When I use align-items: center, it alters the height ...

htmlcssflexbox

Executing a Javascript function post AJAX page loading

I'm not a coding expert, so I hope my question is still clear. Essentially, I have an index.php page with filters (by project, year, month) that send variables to filterData.php after clicking submit. These variables are then used in SQL statements t ...

phpjavascriptcssajaxsiblings

Content will adjust to the screen size after a specific re-sizing

When the width is under 1024, I want the body of the page to scale to fit the user's screen without a scrollbar. My goal is to adjust the entire body so that it fits within the browser window without a scrollbar when the width is under 1024. I attempt ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to center a particular flex item horizontally within its parent container?

Having a flex container with two items, I wish to align the first item to flex-start, and the second item to the center of the flex container. I am particularly concerned about maintaining align-items: center to ensure that all flex items are vertically ce ...

htmlcssflexbox

Styling Dropdown Options Based on Conditions in React

In my current project, I am attempting to modify the className of selected items within a mapped array using another array (this.props.notPressAble). The reason for this is because I want certain objects in the array to have a different CSS style. handleOp ...

javascriptcssreactjs

Is it possible for a CSS block to incorporate another block within it?

Is it possible to apply styles like this in CSS? .bordered { border: 10px dashed yellow; } form input { use .bordered; font-size: 10px; } Alternatively, how can I achieve this without directly embedding each CSS code block in the HTML ele ...

htmlcss

Issue with Carousel functionality in Bootstrap 3.1.1

Using Xcart, PHP5.6, and Bootstrap 3.1.1 The objective is to create a carousel that displays 3 items at once and cycles through a total of 5 items. Despite confirming that the necessary libraries are included and in the correct locations, the carousel fa ...

htmlcsstwitter-bootstrapcarousel

Sass and responsive flex boxes allow for the easy control of image overflow

Duplicate part Looking to create a unique layout for a section within my React application that resembles the image below. Please disregard the lines on the right. https://i.sstatic.net/rfgGy.png Here is the initial HTML structure, with placeholder boxes ...

cssreactjssassresponsive-designflexbox

Error with hyperlinks preventing redirection when clicking on the menu

$(document).ready(function () { $('.mobile-nav-button').on('click', function() { $( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)" ).toggleClass( "mobile-nav-button__line--1"); $( ".mobile-nav ...

javascriptphpjqueryhtmlcss

Fixed-top navbar in Bootstrap obscuring webpage contents

I have tried various solutions to the issue at hand, but nothing seems to be working. I applied padding-top to the container of my main content, but when I add the following CSS: @media (max-width: 768px) { body{ padding: 0; } } it overrides the padd ...

jqueryhtmlcsstwitter-bootstrap

Conceal the div using a sliding left animation

After researching extensively, I have been unable to find a solution to my problem. In order to better illustrate my issue, here is the code for reference: jsfiddle I am looking to create a sliding effect for a calc div where it moves to the left, simila ...

jquerycss

Is it necessary to bring in CSS for the following page?

Should CSS be imported and used across multiple pages in a web application? Is the page structure outlined below considered acceptable, or is there a standard practice to follow? /pages /home index.js index.module.css /cart ...

cssreactjsnext.jsdirectory-structurereact-css-modules

CSS: Inject Text at the End of Input Text's Value

Hey there, I'm facing a minor issue. The user wants to add some funny text to an input field if a specific condition is met. For example: Normal Condition: the input field shows "#{model.user}" Abnormal condition: the input field should display "# ...

javacssjsf

The design of the website is all over the place

I am encountering challenges in creating distinct containers for the header, body, and other sections of my website. The layout is not turning out as planned, and I can't pinpoint where my code is going wrong. Any advice or suggestions on how to resol ...

htmlcss

Customize the dynamic options for selecting with Bootstrap

I have been experimenting with the bootstrap select plugin and have run into an issue while trying to dynamically add options using Javascript. Unfortunately, the list always appears empty. Interestingly, when I revert back to using a conventional HTML sel ...

javascriptjqueryhtmltwitter-bootstrap