"Place the content at the center of the row using display block in Bootstrap version

Having modified the bootstrap.min.css file in my Bootstrap v4.3.1, I replaced all instances of display:flex; with display:block;.

However, after making this change, I noticed that the rows were no longer centered, even when using justify-content-center. This is because the row class is now a block element instead of a flex element.

How can I center the content of a row when it's a block?

<div class="container">
  <div class="row">
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      2
    </div>
    <div class="col-sm">
      3
    </div>
  </div>
</div>

Update #1: Just to clarify, I am only using the edited Bootstrap for printing mode by including the following link:

<link rel="stylesheet" media="print" href="'css/Editedbootstrap.css" />

This issue specifically pertains to printing mode on Firefox. For more information about this problem, you can visit this post.

htmlcssbootstrap-4

Answer №1

Before you submit your answer, I must stress that direct modifications to bootstrap.min.css are not allowed.

If you prefer not to utilize flexbox, consider using Bootstrap 3

To center any block element such as .row, you have the option of using the text-center class or implementing custom CSS.

.row {
    text-align: center;
}
<div class="container">
  <div class="row">
    <div class="col-sm">
      1
    </div>
    <div class="col-sm">
      2
    </div>
    <div class="col-sm">
      3
    </div>
  </div>
</div>

Answer №2

If you want to center a block element like a div, one method is by setting the left and right margins to auto and providing the div with a specific width:

.centered-div {
    margin-left: auto;
    margin-right: auto;
    width: 400px;
}

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

Currently utilizing Yii framework to customize the appearance of a DIV element by specifying the CSS properties within the View, and subsequently storing the CSS file

I am looking for a way to allow users to customize the properties of a parent div, such as color, background, and other CSS styles, directly from the WordPress theming dashboard interface. Can someone please guide me in the right direction? ...

jqueryhtmlcsswordpressyii

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...

cssangulartypescriptangular-animations

Adjusting canvas context position after resizing

I've been experimenting with using a canvas as a texture in three.js. Since three.js requires textures to have dimensions that are powers of two, I initially set the canvas width and height to [512, 512]. However, I want the final canvas to have non-p ...

javascripthtmlcanvasthree.js

Please replace the text with only letters and then submit it without any spaces, periods, commas, or other symbols

Whenever I encounter a form like this, I need to submit it and replace the text in the name field with only letters - no commas, spaces, or special characters. https://i.sstatic.net/9FQnT.png myform.html <script> function fixInput(event) { na ...

javascripthtmlregex

What's the most effective approach to verify if all visible input fields possess a value? (excluding the use of jQuery validator

In order to ensure that all necessary fields are selected, I need to implement a check upon clicking a button. Below is the HTML code: <input type="text" class="required-entry"> <input type="text" class="required-entry"> <input type="text" ...

javascriptjqueryhtml

Changing the border color of an input field to red when an alert is dismissed

Currently, I am using a jquery conferm.js alert for an input field when a button is pressed. If the input field is empty, an alert pops up in default bootstrap 4 blue color. However, I want it to be red and focused on that field at that time. When the user ...

javascriptjquerybootstrap-4

Limit the character count in a textarea

My goal is to control the number of characters that can be entered into a textarea. While I am aware that I could simply use a substring to limit the characters, I prefer to visually inform the user when their text has reached the maximum length. The maxl ...

phpjavascripthtml

Issues arising from the visibility and concealment of elements using bootstrap

Struggling with hiding certain content in my code. I'm fairly new to coding, having just started about a week ago. So far, I've learned HTML, CSS (which I find the most important), and how to utilize Bootstrap 4. My issue lies in wanting to hide ...

htmlcsstwitter-bootstrapbootstrap-4

Display the results of a PHP-MySQL query within an HTML dropdown list

In my database, I have two tables called groups(groupID, groupName) and userBelongToGroups(userID, groupID). groups userBelongToGroups =================== ===================== groupID | groupName userID | groupID --- ...

phphtmlmysqlmysqli

Tips for rendering the stencil as invisible and disabled while still allowing other features (such as rotating and flipping) to remain enabled within the react-advanced-cropper

I am facing a challenge where I need to hide and disable the stencil and overlay in react-advanced-cropper, while keeping all other features like rotation and flipping enabled. Is there a specific property in this library that allows me to disable the st ...

javascriptcssreactjsimage-cropper

Switch up the link color when it pops up

Is there a method to change the link color to gray without encountering glitches like on my site, where it mistakenly shows "Quick Nav."? Click here to view the page with the glitch I only want this particular link to be bold and not any other links. He ...

javascripthtmlcsspopup

What could be causing my navbar to not be responsive on mobile devices?

I'm in need of assistance. When viewing my website in mobile mode, the collapse hamburger menu is hiding too far to the right. This issue is making the site look unresponsive, and I've been unable to find a solution. It seems like the problem sta ...

htmlcssgridbootstrap-5

"Difficulties with Tribute Page Project on FreeCodeCamp: HTML and

I am currently working on a tribute page for a challenge from FCC and I am facing some issues with adding padding to my .life and .work divs in the HTML and CSS code above. Despite spending a few hours searching for solutions online, I have not been able ...

htmlcssmarginpadding

Optimizing mobile page layouts with CSS

I'm putting in a lot of effort to ensure that my simple form page is optimized for mobile devices. Although the form is visible, I find myself having to zoom in quite a bit in order to read it. Here's an example: ...

htmlcssmobilemobile-website

Pass the ID of the <a> element from one function to another

I am a beginner in javascript/jQuery, so please be patient with me if my question seems too simple for you and too challenging for me. I have a function that I won't post the entire code for because it would make this too lengthy. Another function ...

javascriptjqueryhtmljsonajax

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

After using a CSS stylesheet to position my textboxes correctly, I noticed that in Chrome everything appeared fine. However, when attempting to print the site (Ctrl+P), each sentence and textbox shifted. How can I ensure they remain in place? <!-- #cap ...

phpcssprinting

Custom view with spannable text functionality

Can a custom view be included in a spannable text? I've noticed various types of spannable objects in the android.text.style package, but I'm curious if it's possible to insert a custom view. Something like spanable.setSpan(CustomView, .. ...

androidhtmlandroid-viewandroid-spannable

Getting started with CSS and HTML: Tips and Tricks for Beginners

Seeking advice on how to enhance my web designing skills, particularly in starting point and techniques. Currently, I am familiar with HTML and CSS, but have been primarily using pre-made templates for building websites. I aspire to be able to transform ...

htmlcss

Guide to counting the number of image tags within a parent div and selectively removing them starting from a specific position

My dynamic image tag <img> is generated inside a div from the database using fetching. Here is how my HTML looks: <div class='forimgbox'> <p class='palheading'>Pals</p> <img src='userpic/2232323.p ...

javascriptjqueryhtmlcss

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

In the input field, there are numbers and special characters like commas and dots. When calculating the maxLength of the field, I want to ignore special characters. I do not want to restrict special characters. The expected output should be: 1,234 (Total ...

javascripthtmlangularjstypescript