Creating a cohesive layout with Bootstrap 4: aligning text elements in relation to one another

Can someone help me with this code snippet I have?

<div class="container">
    <div class="border rounded-lg" style="height:500px;">
        <div class="ml-2 mt-2">
            <h1 class="display-3">@Model.Name</h1>
            <!-- Image and pay box -->
            <div class="mt-4 container">
                <img src="~/Resources/default.jpg" class="" style="height:300px;" />
                <div class="d-inline align-top float-right border rounded-lg" style="height:250px;width:250px;">
                    @if (!Model.OnSale)
                    {
                        <h3 class="mt-2 text-nowrap text-center text-warning">@Model.Price</h3>
                    }
                    else
                    {
                        <div class="row">
                            <div class="col-2 text-center">
                                <div class="text-secondary font-italic" style="text-align:center;"><s>@Model.PriceBeforeDiscount</s></div>
                                <div class="mt-2 text-nowrap text-warning">@Model.Price</div>
                            </div>
                        </div>
                    }
                    <button class="btn btn-success text-white text-center font-weight-bold w-100 mt-3">
                        BUY NOW
                    </button>

I have a model that looks like https://i.sstatic.net/XhW0i.png. How can I center both price texts (the ones on the right) as "text-center" doesn't seem to work for some reason? Any suggestions?

htmlcssbootstrap-4

Answer №1

Your code currently has the text prices centered, but they are getting cut off by the column width.

To fix this issue, change col-2 to col-12 like this:

@if (!Model.OnSale)
{
    <h3 class="mt-2 text-nowrap text-center text-warning">@Model.Price</h3>
}
else
{
    <div class="row">
        <div class="col-12 text-center">
            <div class="text-secondary font-italic"><s>@Model.PriceBeforeDiscount</s></div>
            <div class="mt-2 text-nowrap text-warning">@Model.Price</div>
        </div>
    </div>
}

I can't demonstrate it here, but after testing locally, using col-12 seems to solve the problem.

Answer №2

If you attempt 

<section class="row d-flex justify-content-center"></section>

It might solve your problem

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

Utilize a personalized container for Bootstrap 4 dropdowns

I'm currently working on a Megamenu using Bootstrap 4 dropdown functionality. My goal is to implement a custom container like <div class="dropdown-container"> to control the visibility of the dropdown content, instead of relying on Bootstrap&ap ...

jquerydrop-down-menusassbootstrap-4megamenu

Automatically refreshing the canvas whenever the value of an HTML element is modified in Javascript

Below is the javascript code that is relevant <script> $.fn.ready(function() { var source = $('#source').val(); Meme('url1', 'canvas','',''); $('#top-line, #bottom-li ...

javascriptjqueryhtmlcsscanvas

Executing a function in Angular 2 depending on the class assigned to a <div>

In my HTML code, I am using *ngFor to iterate through an array of messages. <div *ngFor="let message of messages; let i=index" [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i }" (click)="onAddtoMessag ...

javascriptcssangularng-class

Can you explain the distinction between align-content and align-items?

Can you explain the distinction between align-items and align-content? ...

csslayoutflexboxalignment

Angular index.html file can include a conditional script

I am currently working on an Angular project, where the index.html serves as the main entry point for the application, just like in any other Angular project. This file contains important links and configurations. Within the HTML code snippet below, you w ...

javascripthtmlangulartypescriptgoogle-tag-manager

Adding the active class in Bootstrap can be easily achieved in CodeIgniter by using the

I am seeking guidance on how to add an active class in CodeIgniter when dividing the view into three separate files. These files include: header.php page1.php ... page10.php footer.php According to this thread, there seems to be no clear solution prov ...

phpjquerycsscodeigniter

Managing and keeping track of a universal value within the success callback function among numerous Ajax POST requests

I am faced with a challenge involving two HTML elements: 1). a div element that functions as a multiple select, created automatically by a predefined widget, and 2). a button that triggers an onclick event. On the JavaScript side, I have a global variable ...

javascripthtmljqueryajax

Error with displaying uib-datepicker within a table row

I need assistance with integrating a uib-datepicker into a table: <div class="table-responsive"> <table class="table table-striped" > <thead> <tr> <th class="col-md-2"><span>Date ...

cssangularjstwitter-bootstrapangular-ui-bootstrap

Automatically adjust multiple images on an HTML webpage

Just starting out with html programming here. Looking to add top margin using a span class, any tips on how to tackle this issue? ...

javascriptjqueryhtmlcss

Encountering an issue with loading objects in THREE.js

Recently, I started exploring threejs and decided to create a simple 'Hello World' project by creating a basic shape. I am using c9.io to write my code, but I suspect it might be causing an issue as my code is not executing properly. Below are so ...

javascripthtmlthree.jsc9.io

Unattended HTML and head tags found unexpectedly

As a new programmer tackling my first RoR site with an integrated bootstrap theme, I've encountered some issues with the HTML code that are causing problems with image sharing on Facebook. The error message from the debugger indicates that there are m ...

javascripthtmlruby-on-railsruby

Structuring PHP, HTML, and jQuery files on a website

I'm a beginner in web development and currently working on a school project to create a basic educational video platform. My next task involves turning my site into a single page application, which I plan to accomplish with the help of jQuery and AJAX ...

phpjqueryhtmlajaxstructure

Whenever I attempt to use window.print(), the styling gets completely messed up. I've experimented with both @media screen and @media print, but unfortunately, I

I am working on creating an invoice, the design looks perfect in the browser, but when I try to window.print() the style gets corrupted. I attempted to include @media screen and @media print, but I am still facing the same issue. The invoice form is incorp ...

javascripthtmlcssbootstrap-4

List the acceptable favicon formats for Internet Explorer version 10 and above

When I say type, I'm referring to the file extension. My favicon displays correctly in Firefox, Chrome, and Safari, but someone suggested that the issue may be related to the favicon type. Is there a reliable online resource where I can find informa ...

htmlinternet-explorerfavicon

Is there a need to minify if the data will be compressed through gzip during

During the early days (yes, I'm really showing my age here), it was possible to reference scripts from a renamed zip file using this format: <script archive="path/to.jar" src="some.js"></script> This method was supported in IE4, NS4, and ...

javascripthtml

Child's transformation leads to strange overflow scroll appearance?

What causes the vertical scrollbar to increase in size in this situation while the horizontal scrollbar remains unaffected? <div style="width:200px; height: 200px; overflow:scroll"> <div style="width: 400px; height: 400px; background-color:or ...

htmlcssoverflowcss-transforms

PHP displays an HTML table with error messages

I recently created a table by extracting data from a database using a loop to retrieve all the necessary information. However, I encountered an error after calling a javascript function in the HTML onClick event of an input element. The function itself wor ...

phphtmlhtml-tableecho

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ). However, there may not be an element with this class in the dom yet. My goal is to retrie ...

javascriptcss

Can a callout or indicator be created when a table breaks across columns or pages?

As we develop HTML pages for printing purposes, one specific requirement for tables is to include an indicator like "Continues..." below the table whenever a page or column break occurs. Additionally, in the header of the continuation of the table, we need ...

javascripthtmlcsscss-selectors

Is there a way to remove CSS based on the generated HTML code?

Currently tackling a project in Next.js involving custom SCSS, Bootstrap SCSS, and React-Bootstrap. Struggling with the bloated size of our main.scss file due to unused CSS. After observing that 95% of the CSS is not utilized, I aim to eliminate all unnec ...

javascripthtmlreactjssassnext.js