Bootstrap component malfunctioning and not performing as expected

Currently, I am learning how to use Bootstrap and attempting to replicate the example themes found on their official website. The specific theme I am focusing on is available at this link: https://getbootstrap.com/docs/4.3/examples/pricing/

Unfortunately, the pricing cards that I have created are not behaving the same way as the examples provided by Bootstrap. I have shared the code below for reference.

I would appreciate it if someone could shed some light on why my price cards are expanding individually in width when the screen size changes, whereas the Bootstrap versions maintain a consistent width and height.

Thank you for any assistance!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="card-deck mb-3 text-center">
      <!--Price Section-->
    
      <div class="card mb-4 shadow-sm">
    
        <div class="card-header">
            <h4 class="my-0 font-weight-normal">Free</h4>
        </div>
    
        <div class="card-body">
    
            <div class="card-title">
                <h1>$0 <small class="text-muted">/ mo</small></h1>
            </div>
            <ul class="card-text list-unstyled mt-3 mb-4">
                <li>10 users included</li>
                <li>2 GB of storage</li>
                <li>Email Support</li>
                <li>Help Center Access</li>
            </ul>
    
        
            <button type="button" class='btn btn-lg btn-block btn-outline- 
       primary'>Sign Up</button>
        </div>
    
        </div>
    
        <!--Price End-->
     
    
        <!--Price Two-->
        <div class="card mb-4 shadow-sm">
    
            <div class="card-header">
                    <h4 class="my-0 font-weight-normal">Free</h4>
                </div>
        
            <div class="card-body">
        
                <div class="card-title">
                    <h1>$15 <small class="text-muted">/ mo</small></h1>
                </div>
                <ul class="card-text list-unstyled mt-3 mb-4">
                    <li>10 users included</li>
                    <li>2 GB of storage</li>
                    <li>Email Support</li>
                    <li>Help Center Access</li>
                </ul>
        
          
                <button type="button" class='btn btn-lg btn-block btn- 
       primary'>Sign Up</button>
            </div>
        
        </div>
        
       <!--Price End-->
    
    
       <!--Price Three-->
       <div class="card mb-4 shadow-sm">
    
            <div class="card-header">
                    <h4 class="my-0 font-weight-normal">Free</h4>
                </div>
        
            <div class="card-body">
        
                <div class="card-title">
                    <h1>$29 <small class="text-muted">/ mo</small></h1>
                </div>
                <ul class="card-text list-unstyled mt-3 mb-4">
                    <li>10 users included</li>
                    <li>2 GB of storage</li>
                    <li>Email Support</li>
                    <li>Help Center Access</li>
                </ul>
        
                      <button type="button" class='btn btn-lg btn-block btn- 
      primary'>Sign Up</button>
            </div>
        
       </div>
       <!--Price End-->
       </div>

htmlcsstwitter-bootstrap

Answer №1

Having trouble applying the button class correctly? Here's a solution to try:

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <div class="container">
    <div class="card-deck mb-3 text-center">
      <!--Price Section-->

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Free</h4>
        </div>

        <div class="card-body">
          <div class="card-title">
            <h1>$0 <small class="text-muted">/ mo</small></h1>
          </div>
          <ul class="card-text list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email Support</li>
            <li>Help Center Access</li>
          </ul>
          <button class="btn btn-outline-primary btn-block">Sign Up</button>
        </div>
      </div>

      <!--Price End-->

      <!--Price Two-->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Free</h4>
        </div>

        <div class="card-body">
          <div class="card-title">
            <h1>$15 <small class="text-muted">/ mo</small></h1>
          </div>
          <ul class="card-text list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email Support</li>
            <li>Help Center Access</li>
          </ul>

          <button class="btn btn-primary btn-block">Sign Up</button>
        </div>
      </div>

      <!--Price End-->

      <!--Price Three-->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Free</h4>
        </div>

        <div class="card-body">
          <div class="card-title">
            <h1>$29 <small class="text-muted">/ mo</small></h1>
          </div>
          <ul class="card-text list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email Support</li>
            <li>Help Center Access</li>
          </ul>

          <button class="btn btn-primary btn-block">Sign Up</button>
        </div>
      </div>
      <!--Price End-->
    </div>
  </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

Can a CSS <div> element have margins applied to it?

Can a margin be defined for a text area? My WYSIWYG editor wraps my text within <div> tags instead of using line breaks <br /> So I was thinking of adding a margin to the <div> tag? Is this possible in CSS? If so, how can it be done? ...

htmlcssxhtml

Adjusting the Size of an HTML Slideshow

While designing a homepage for my band, I encountered an issue when trying to integrate a slideshow element from an external source. The size of the slideshow is fixed at 600 x 300px and cannot be adjusted. Additionally, I found it challenging to position ...

javascriptjqueryhtmlcss

How can I automatically copy a highlighted link in HTML?

I am attempting to implement a feature where users can click on a link and have it automatically copied. For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue. This is the code I have ...

javascripthtmlcssformshighlight

What is the best way to set a fixed width for my HTML elements?

I am facing an issue with my user registration form where error messages are causing all elements to become wider when they fail validation. I need help in preventing this widening effect. How can I achieve that? The expansion seems to be triggered by the ...

javascripthtmltypescriptmaterial-ui

Implement a versatile Bootstrap 5 carousel featuring numerous sliders

Is it possible to create a Bootstrap 5 carousel with six items displaying at a time instead of three? I tried changing the value in the JS code, but it didn't work. Can you correct my code so that it displays six items at a time and can be variable la ...

javascripthtmljquerybootstrap-5

Is there a simpler method to access the source element for an event?

I'm just starting to learn JavaScript and jQuery, and right now I have the following code in my HTML: <a id="tog_table0" href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a> After that, I hav ...

javascriptjqueryhtmleventsdom

Unable to output the string using htmlspecialchars

Oops! I made a mistake... just came across a JavaScript alert box! I just included htmlspecialchars. $src = './imgs/flag.jpg'; echo sprintf("<img alt=\"'.htmlspecialchars($name).'\" src=\"%s\" />", $src); I ...

phphtml

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

csswordpresswoocommerce

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

javascriptcsstwitter-bootstrap-3drop-down-menuanchor

Transforming an Ionic mobile application into a web-based application: A step-by

I currently have a mobile app developed using Ionic. I now require a desktop-friendly website version of the app to cater to users who wish to access it from their computers. Can anyone point me to any resources or documentation that demonstrate that th ...

angularjshtmlwebweb-applicationsionic-framework

Include dropdown lists for selecting the year, month, and day on a web page

Is there a way to implement a dropdown style date selector that dynamically updates the number of days based on the selected year and month using JavaScript? For example, February 2008 has 29 days, April has 30 days, and June has 31 days. Any suggestions ...

javascripthtml

exchange the class using only JavaScript

I need help with a code snippet that allows for swapping classes using a loop. The objective is to click on the brown square causing it to move to the position of the blue square, while the blue square moves to the previous position of the brown square. T ...

javascripthtmlcss

The title tag's ng-bind should be placed outside of the element

When using ng-bind for the title tag inside the header, it seems to produce unexpected behavior. Here is an example of the code: <title page-title ng-bind="page_title"></title> and this is the resulting output: My Page Sucks <titl ...

javascripthtmlangularangular7ng-bind

Unveiling the Mystery: How Browser Thwarts Server Push in HTTP/2.0

After studying the documentation of HTTP/2.0, I discovered that it is feasible to completely close a referenced stream using the RST_STREAM frame. Check it out here: ()! I am curious about how this feature can be implemented in popular web browsers such a ...

javascripthtmlwebbrowser-controlhttp2

Aligning a block of text containing two varying font sizes in the center

I'm attempting to center a paragraph element with a span inside that has a different font size, causing the alignment to be slightly off. Below is the HTML code: <p class="priceWrap"><span class="moneySign">$</span>60000.50</p> ...

htmlcss

Effective methods to prevent the `translate` transform from triggering an element to be perceived as position relative?

I am encountering an issue with an absolutely positioned div that is nested within a statically-positioned parent container. I noticed that when I apply the transform: translateY(-50%) property to the container, the child element behaves as if it were bein ...

htmlcsscss-positioncss-transforms

Difficulty in vertical alignment of inline-block elements

Greetings, I am currently working on creating a Resume in HTML. However, I seem to be facing an issue with the inline-block property as the two div elements that should be placed next to each other are not displaying as expected - one of them appears sligh ...

htmlcss

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

javascriptjqueryhtml

Ways to Adjust the Text Size within Table Cells

I'm having trouble changing the font size in my table. I've tried adding the font size in the HTML tag, as well as in the CSS code for the Myposts class, but so far nothing has worked. Do you have any suggestions on how to successfully change the ...

phphtmlcssfontshtml-table

I am puzzled as to why my text and div boxes are displaying in my navbar/hamburger menu instead of at the bottom of the page

Greetings, everyone! This is my debut post here so bear with me if it's not presented in the correct format. Currently, I am deep into creating a website using HTML, CSS, and just a hint of JavaScript. My primary focus right now is on building the ho ...

javascripthtmlcssstyles