Published 02 Aug, 2022

Jquery - Bootstrap multi-line button with badge

Category Jquery
Modified : Nov 29, 2022
20

I'm working on a project with bootstrap and I'm trying to figure out how to get a button that shows: -Text left aligned (pull-left makes sense here I think) -A badge right aligned with a number (pull right makes sense here)

This works great but the problem is most of my buttons have names that are ideal for a two-line button. Everything looks great on one line but as soon as the text gets too long or the button gets too short, it kicks the text to another line and the top text looks centered instead of pulled left. This looks good:

<div style="width:300px;margin:10px">
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;">
        <span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
    </button>
</div>

This looks bad (button is too narrow, text on top doesn't pull left):

<div style="width:150px;margin:10px">
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;white-space:normal;display:inline-flex;">
        <span class="pull-left">Under Investigation </span><span class="badge pull-right">5</span>
    </button>
</div>

Fiddle: https://jsfiddle.net/rjerskine/ay9L512h/2/

Solution: I ended up having to wrap the text in another div which is fine and works great when the window resizes. The text kicks to two lines and the badge stays on one line. I'll end up writing this with proper classes but here's the solution for anyone with a similar question:

<div class="col-sm-2">
    <button type="button" class="btn btn-primary btn-block" style="font-weight:bold;">
        <div class="pull-left" style="text-align:left;width:calc(100% - 30px);white-space:normal;overflow:hidden;">
            Under Investigation
        </div>
        <span class="badge pull-right" style="display:inline-flex;">5</span>
    </button>
</div>

Answers

There are 1 suggested solutions here and each one has been listed below with a detailed description. The following topics have been covered briefly such as Javascript, Html, Css, Jquery, Twitter Bootstrap. These have been categorized in sections for a clear and precise explanation.

20

Use text-align:left on that button.

button span.pull-left {
  text-align: left
}

Fiddle


Associated Technologies

Details of all the mentioned technology in the question that you should know about for a detailed information.

Javascript

Javascript is the programming language of the web. It is client side scripting language that runs inside a browser. It's a lightweight, interpreted programming language and is very capable for network centric applications. One of the primary reasons for its popularity is also because it's fun and flexible.

Javascript is one of the core-technologies for the web alongside HTML and CSS. It is high level language with dynamic typing, first class functions and is termed as multi-paradigm as it supports event-driven, functional and imperative programming styles. It also has various APIs to work with text, dates, DOM etc.