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

Using an HTML img tag without success, despite having the correct link

My HTML img tags are not working even though the link is correct. I have been attempting to resolve this issue for quite some time by researching multiple websites and trying various solutions, but unfortunately, nothing seems to be working. All I want i ...

htmlimagesrc

Preserve line breaks within HTML text

Utilizing the powerful combination of Angular 5 and Firebase, I have successfully implemented a feature to store and retrieve movie review information. However, an interesting issue arises when it comes to line breaks in the reviews. While creating and edi ...

htmlangularfirebasefirebase-realtime-database

Table featuring alternating background colors for rows and a distinct header design

Incorporating CSS, I have managed to style my rows in alternating colors. Take a look at the code snippet below: Fiddle tr:nth-child(odd) td { background-color:red; } tr:nth-child(even) td { background-color:blue; } tr th { background-color: yellow} ...

htmlcss

Switching from jQuery to vanilla JavaScript, iterating through each HTML tag in a loop

Here is my current jQuery code that I am looking to convert into vanilla JavaScript. var elements = []; document.querySelectorAll('*:not(script, style, iframe)').forEach(function(element) { elements.push(element); }); I have tried using d ...

javascriptjqueryhtmlarraysdom

`Is it possible to modify the background color of InputAdornment in Material-UI TextField?`

For the first 10% of the text field, one background color is used, while for the remaining 90%, another background color is applied. <TextField className={classes.root} type="text" placeholder="username" var ...

cssreactjsmaterial-uitextfield

What is the process for inserting a hyperlink onto an image within a query slider?

I am experiencing difficulties when attempting to add hyperlinks to the images in my slider. I have come to understand that images cannot be clickable in jQuery sliders, so I have tried the following in the HTML: <div class="wrapper"> <div class= ...

jqueryhtmlcss

What is the best way to create a fixed contact form on specific pages?

There is a Contact Form 7 on the webpage that I want to make fixed to the right side. Initially, the form is hidden and only the form button (open) is visible. When clicked, the form should open. ...

jquerycss

Navigating Websites in Google Search

Whenever I search for keywords related to my website on Google, the search results show my website's content and address. However, when I click on the link, it redirects me to a different unrelated website. Click here to view an image ...

htmlgoogle-search

A guide on monitoring SASS files in all subdirectories with an npm script

Is there a way to watch all sass directories and generate CSS files to the corresponding 'CSS' folder, including subdirectories? The current method involves listing each directory separately in the NPM script. "scripts": { "sas ...

cssnpmsassdart-sass

Switching a div class in Angular 6 with a button click: A step-by-step guide

In this scenario, I have a div with the class name old. There is also a button that, when clicked, should toggle the div's class name between old and new. I am looking for a solution using Angular 6. Below is the code snippet: I am relatively new to ...

htmlangular

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

javascripthtmlcssangularscroll

Setting the opacity of an image will also make the absolute div transparent

I currently have an image gallery set up with the following structure : <div class="gallery"> <div class="message"> Welcome to the gallery </div> <img src="http://placehold.it/300x300" /> </div> Here ...

cssimageopacityabsolute

Having trouble getting the Facebook Like Box to function properly

I am having trouble displaying the like box on my website. I followed the code provided at https://developers.facebook.com/docs/plugins/like-box-for-pages and even tried using the HTML5 version, but nothing appears on the page. This is the code I used: & ...

htmlfacebookplugins

Creating dynamic color changes with overlapping SVG triangles using CSS

I'm facing a challenging issue: I want to change the color of an SVG line as it intersects with a triangular background created using CSS. Although I've experimented with gradients, they don't produce the desired effect. My goal is for the ...

htmlcsssvg

Am I utilizing the htmlspecialchars function properly?

My main objective is to protect the user from malicious code and prevent XSS attacks. I have implemented a series of checks to filter the user's input before storing it in the database. The user input is stored in the $post variable. $post = htmlspec ...

javascriptphphtml

How do I resolve the issue of Python doubling (" ") to ("" "")?

Here is an example of the code I am using without the website included. from bs4 import BeautifulSoup import requests import csv import random as rd source = requests.get('http://example.com').text file = open('C:/xampp/htdocs/new-site/text ...

pythonhtmlpython-3.xbeautifulsoup

Tips for fixing the issue of disappearing top margins in elements while using CSS3 Pie in Internet Explorer 7

Hey there! I've been experimenting with a lot of CSS3 effects, but I'm running into issues trying to get the same effects to work on IE 7 and 8. I've been attempting to use CSS3 Pie to help with this. While CSS3 Pie has worked well for som ...

htmlcsscss3pie

Tracking User Visits in Codeigniter

Below is the code breakdown: (Step by step) Place counter.txt in APPPATH . 'logs/counter.txt' Set up counter_helper.php in APPPATH . 'helpers/counter_helper.php'; Autoload the newly created helper in APPPATH . 'config/autoload.p ...

phphtmlcodeigniterwebhitcounter

Clicking on a link in HTML with the onclick event

I am looking to create a button that will direct me to a different page. Here is the code snippet I have: <div align="right" ><input type="submit" id="logout" onclick="location.href='/login?dis=yes'" value="Sign Out" ></div>& ...

javascripthtmlonclick

Looking for the optimal width ranges for media queries on laptops and cell phones?

Can anyone suggest the optimal width parameters to use in my code for different screen sizes, from tablets and laptops to cellphones, in order to create a responsive design? ...

htmlcssfixed-width