What is the best way to center a Pricing Widget in HTML/CSS?

Greetings! I am currently facing an issue with aligning the Pricing Table in the center. Initially, there were three tables displayed, but I decided to remove one of them, leaving only two tables. However, even after removing one table, the alignment did not shift accordingly. To illustrate the desired position of the table and provide insight into the code, I have attached a screenshot below:

Click here to view the screenshot

HTML CODE

<div class="section-title">
      <h2>Unlimited courses and projects on all paid plans</h2>
      ...
      (HTML code continues)
    </div>

  </div>

CSS CODE

.pricing .box {
  padding: 500px 20px;
  text-align: center;
  border-radius: 8px;
  position: inherit;
  overflow: hidden;
  background: #fefefe;
  box-shadow: 0px 5px 90px 0px rgba(110, 123, 131, 0.1);
}

...
(CSS code continues)

Please refer to the screenshot for visual clarity regarding the desired change.
Thank you!

htmlcssbootstrap-4

Answer №1

Apply the class d-flex justify-content-center to the row element

<div class="row pricing d-flex justify-content-center">

Link to Example on JSFiddle

Answer №3

It seems that the classes you used in your CSS file do not match the ones in your HTML file. Make sure to correct them accordingly.

Answer №4

take a look at this codepen.io link

It's fully functional insert the following into your CSS file

.pricing{
    display: flex;
    justify-content: center;
}

this adjustment will not impact the width of the pricing table

if you incorporate 

<div class='row pricing d-flex justify-content-center'>
, the width of the pricing table will be altered

remember to assign the class pricing to <div class='row pricing'>

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

Issues with Forms Affecting my Footer

One of the best methods to understand this issue is to view it live. The footer on the homepage looks great at www.fishingreports.com. However, there seems to be a problem with the footer at www.fishingreports.com/users/register. Whenever I copy the cod ...

htmlcssfooter

What is causing the divs to behave in this floating manner?

I'm experiencing an issue on my website where the divs are floating in a strange manner. The layout displayed on the original theme's page (http://demo.fabthemes.com/revera/portfolio/) is correct, but mine seems off. I have reviewed the code and ...

htmlcss

Update the theme of angular library upon import

I am seeking information on how to create a common Angular library with custom styled components, such as size and font. My goal is to import this library into two separate projects, which I have successfully done so far. However, now I wish for each proj ...

javascriptcssangularsass

Display various divs simultaneously based on the quantity of items in the dropdown menu

In my project, there is a dynamic select list that retrieves items from the database. Users have the ability to add or delete items from this list. Below is some code related to this functionality: <div class="form-group col-md-3"> <la ...

javascripthtmljquerysynchronous

Using ASP.Net to Enhance Kendo DatePicker Selection

Is there a way to retrieve the selected date as a string and assign it to a variable using jQuery? <div class="col-md-3"> @Html.Kendo().DatePicker().Name("SearchDate").Value("").HtmlAttributes(new { style = "width:150px", @class = "", @placehol ...

jqueryhtmlasp.netkendo-ui

Developing a single source code that can be used across various platforms such as desktop, Android, and

Having a background in C++ and some knowledge of HTML, CSS, and JavaScript, I am currently working on developing a web application using Node.js and React.js. This application will be accessible through both web browsers and mobile devices. My goal is to ...

javascriptandroidhtmlios

Move dots or points smoothly from a starting position to their destination

How can I achieve animation using SVG or CSS? The animation should involve the following: Initially, only lines will be visible (picture 1). After 2 seconds, dots (.) will appear and join the line curves with some animated movement to the dots (picture 2 ...

jquerycsshtmlsvg

Video background in JavaScript

Can anyone help me with using the jQuery plug in videoBG to fill a top div with a video that has 100% width and height? I want the #top-video to fill the #top-content but nothing is showing up. Any suggestions would be appreciated. Thanks! <!DOCTYPE ...

javascripthtmlcssvideojquery-plugins

Toggling the legend and row on click functionality in Google charts

I have a specific requirement that involves a Google chart: Once a Google chart is loaded, I need the ability to click on a legend, which will then gray out the legend and remove its corresponding value from the graph. If I click on the grayed-out le ...

javascripthtmlgoogle-visualization

Increase the spacing between rows and columns in Bootstrap

Is there a way to create gaps between rows and columns in bootstrap without disrupting the layout? I am trying to have three columns on each row by using col-4, but when I try to add margin or padding, it messes up the design. My goal is to achieve a layo ...

cssbootstrap-5

Choose various widgets

Does anyone know where I can find a widget that resembles a <select multiple="multiple">, with an expanded dropdown featuring a scroll bar, but limited to only selecting one option? ...

jqueryhtmljquery-ui

Utilizing AngularJS $anchorScroll for navigating to an anchor tag on a different page

On my AngularJS Home Page, I am trying to scroll to an anchor tag on another page. Both pages are loaded as partial html files into the ng-view component based on the URL. When I start the server, the home page loads and then I need to navigate to the FAQ ...

javascripthtmlangularjs

What is the reason for the input box remaining enabled even after selecting the checkbox?

Hello, I have a JavaScript function where I am attempting to disable an input box based on a checkbox checked in jQuery Mobile. However, it's not working as expected and the value is not being taken. How can I achieve this functionality? ...

javascriptjqueryhtmljquery-mobile

Despite setting my navbar to have a sticky position, it continues to mysteriously disappear

My navigation bar is disappearing even though I have set it to position: sticky. The issue emerged when I transitioned from the "About" section to the subsequent section. Even though I replicated the same changes as in the "About" section, the navigation b ...

htmlcsswebnavbar

Mobile device scrolling glitch

I'm currently working on my website, which can be found at . After testing it on mobile devices, I came across an issue that I just can't seem to fix. For instance, when viewing the site on a device with 768px width, you can scroll to the righ ...

javascripthtmlcsstwitter-bootstrap-4

Display various JavaScript function outputs in an HTML table for convenient tracking

Thanks to a helpful user on this platform, I was able to capture data from a JavaScript function and display it in an html table. However, I now have another query. How can I execute the function multiple times during page load and record the results in ...

javascripthtmlfunctionhtml-tablegetelementbyid

Angular Js has encountered an issue with sorting an array collection using the OrderBy object

There's an issue in the HTML code where Angular is unable to orderBy because it's not recognizing it as an Array. HTML: <div class="container" ng-app="myApp" ng-controller="myCtrl2"> <form> Choose an Option: < ...

javascripthtmlangularjs

Animating the Position of Masks using Angular 2+

I am encountering issues with animating the mask-position property using Angular's animation library and I am seeking assistance in identifying where my mistake lies. This method is successful: @keyframes maskWipe{ from {mask-position: 100% 0; ...

javascriptcssangularanimation

The body can only stretch up to a certain percentage of its width, not a full 100%

Recently, I've been encountering an issue with my webpage where the body does not stretch 100% the width of the screen. I've tried numerous CSS rules to fix it, but nothing seems to be working. When you view the page in a browser, it appears to c ...

htmlcssstretch

Ways to ensure two stacked divs have equal height

I'm in the process of designing a card with two stacked divs. The upper section of the card contains an image, while the lower part consists of text. How can I ensure that both the top and bottom divs have equal heights? I am hesitant to specify fixed ...

htmlcssflexbox