Text in modal with Bootgrid not properly aligned

Question

How can I properly align the text in my Bootstrap on my Bootgrid? Currently all on one single line, not wrapped. This my JavaScript code:

$(document).ready(function() {
$("#grid-data").bootgrid({
caseSensitive: false,
rowCount: [25, 50],
formatters: {
  "poster": function(column, row) {
    return "<img src=\"http://image.tmdb.org/t/p/w500" + row.poster + "\" height=\"182\" width=\"138\" class=\"btn btn-xl btn-default command-modal\" data-toggle=\"modal\" data-target=\"#" + row.id + "\" ><div class=\"modal fade\" id=\"" + row.id + "\" role=\"dialog\" tabindex=\"-1\" aria-labelledby=\"gridSystemModalLabel\"><div class=\"modal-dialog \" role=\"document\"><div class=\"modal-content\"><div class=\"modal-header\"><h4 class=\"modal-title\">" + row.movie + " (" + row.year + ")" + "</h4></div><div class=\"modal-body\">" + row.plot + "</div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button></div></div></div></div>"
  },
  "link": function(column, row) {
    return "<a class=\"btn btn-xl btn-default\" href=\"http://imdb.com/title/" + row.id + "\" target=\"_blank\">" + row.id + "</a>";
  },
}
}).on("loaded.rs.jquery.bootgrid", function() {
$(this).find(".command-modal").click(function(e) {
  $($(this).attr("data-target")).modal("show");
});
});
});

I've prepared a JSFiddle: click on the movie poster to launch the modal.

Answer 1

To make your text not wrap with an ellipsis, you’ll need to override your bootstrap css by including these styles:

.bootgrid-table td {
  white-space: normal;
}

It will result in this: https://jsfiddle.net/mrh03oaL/