Align title to the right - Bootstrap Dialog plugin

Viewed 53

How can I align the title "hello" to the right by giving more options to the show function?

Thanks.

 BootstrapDialog.show({
        message: 'Hi Apple!',
        title: "hello"
    });
    
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

 <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
Link: https://github.com/nakupanda/bootstrap3-dialog

4 Answers

you could follow either of these 2 methods:

1- add this css to change the title width in the dialog and add text-align

.bootstrap-dialog-title
{
  text-align:right;
  width:90%
}

2- consider special variable for the title like this

var $title = $('<div class=" textR text-right">Hello</div>');
  
BootstrapDialog.show({
        message: 'Hi Apple!',
        title: $title
    });

and then add this CSS

.textR{
   width:500px;
}

Use the dev tools in your browser to find the class or id of the title and apply some styles for it, something like:

.title {
    text-align: center;
}

As Per link you provided, there is JS Fiddle already available for it: http://jsfiddle.net/o5k0eaws/1/ from this example, the class name is : bootstrap-dialog-header

.bootstrap-dialog-header{
 text-align:center;
 }

Since you want to align the title to the right, the below would do.

.bootstrap-dialog-header {
    float: right
}
Related