How to show a success message in Bootstrap?

[winzip]

I’m using this code

<div class="alert alert-success">
  <strong>Success!</strong>
</div>

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 ?

[Gandalf]

If would help if you were to show your CSS.

[winzip]

@Gandalf

u were to show your CSS.

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

[Gandalf]

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

[winzip]

@Gandalf

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 ?

[TechnoBear]

@winzip

div to be smaller = > shall I make width =some_percent % to make smaller ?

What happened when you tried that? Did it work?

@winzip

div to be in the **middle ** = > what to do with this ?

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

@winzip

message to be at the center of the div = > what to do with this ?

Did you try text-align: center;?

[ronpat]

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.