How to show a success message in Bootstrap?

I’m using this code

<div class="alert alert-success">

this becomes quite a big div and covers full width of the parent div. . …I want

  1. div to be smaller
  2. div to be in the **middle **
  3. message to be at the center of the div

Is there any way ?

If would help if you were to show your CSS.

1 Like

class=“alert alert-success” are bootstrap css class

Well, then, you’ll either need to change the Bootstrap CSS or add your own class that modifies the Bootstrap CSS.

yes. …right.

div to be smaller = > shall I make width =some_percent % to make smaller ?
div to be in the **middle ** = > what to do with this ?
message to be at the center of the div = > what to do with this ?

What happened when you tried that? Did it work?

margin: 0 auto; generally works, but it’s hard to be sure with such an isolated code snippet.

Did you try text-align: center;?

Zipper, we need to see HTML and CSS.

So far, you haven’t mentioned the version of bootstarp that you are using. Sorry, but I’m not into “guessing” my time away.

Don’t change the original Bootstrap code. If modifications are necessary, write code on a local stylesheet that overrides the bootstrap code. Do you know how to do that?

Display your site or test page in your browser. Right-click the page and “show source”. Copy the code that is shown to a file. Open the copied page in another browser tab to be sure it matches the original page. Edit that copied file while displaying it in another browser window. Gradually eliminate unnecessary HTML until you have a minimal working page that demonstrates the problem. (That may take a couple of hours). Post the minimal page along with the appropriate supporting bootstrap code in a message including URLs to needed resources. When you can open the page in your browser and see the problem, the post the remaining code in a message.

If all else fails, take a class in HTML and CSS and learn to use your browser’s developer’s tools so you can learn to read bootscrap’s CSS.

Offhand, it sounds like a job for a table/table-cell or flex, depending on the context.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.