asked    Enoch     2018-10-22       html       9 view        1 Answer

[SOLVED] Left Align Badges

I have created this card here Picture in which i have some badges but they are not aligned in the right way i need to left align them like this image.enter image description here. Can anyone help me in aligning these badges just like they are aligned in the second image? I am using bootstrap 3.3.7 and this just a little code snippet and i think this is enough information.

here is the html code.

<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-sm-6">
  <div class="card main-content">
    <div class="row clearfix" id="line">
      <div class="col-sm-12">
        <div class="header">
          <h2>
            Insights
          </h2>
        </div>
        <div class="modal-body">
          <div class="row clearfix">
            <div class="col-sm-12" style="display: table;">
              <div>
                Total Students
                <span class="badge badge-primary">
                                            0
                                        </span>
              </div>
              <br>
              <div>
                Subjects
                <span class="badge badge-primary">
                                            20
                                        </span>
              </div>
              <br>
              <div>
                Sections
                <span class="badge badge-primary">
                                            289
                                        </span>
              </div>
              <br>
              <div>
                Created On
                <span class="badge">
                                            27/8/2018
                                        </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  1 Answer  

        answered    Noah     2018-10-22      

You can wrap your labels in a <span> tag and give it a min-width. This way, the badges will be horizontally left aligned and vertically on the same line:

.insight-label {
  display: inline-block;
  min-width: 120px;
}
<link href="" rel="stylesheet" />
<div class="col-sm-6">
  <div class="card main-content">
    <div class="row clearfix" id="line">
      <div class="col-sm-12">
        <div class="header">
          <h2>Insights</h2>
        </div>
        <div class="modal-body">
          <div class="row clearfix">
            <div class="col-sm-12" style="display: table;">
              <div>
                <span class="insight-label">Total Students</span>
                <span class="badge badge-primary">0</span>
              </div>
              <br>
              <div>
                <span class="insight-label">Subjects</span>
                <span class="badge badge-primary">20</span>
              </div>
              <br>
              <div>
                <span class="insight-label">Sections</span>
                <span class="badge badge-primary">289</span>
              </div>
              <br>
              <div>
                <span class="insight-label">Created On</span>
                <span class="badge">27/8/2018</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




Your Answer





 2018-10-22         Walter

Display formatted DateTime inside ObservableCollection

Into DataGrid I have 2 column: public string DayName {get; set;} public DateTime DateTimeColumn {get; set;}I want to display data as below:DayName | DateTimeColumn Monday | 2018-09-03 Tuesday | 2018-09-04 Wednesday | 2019-09-05 ....To do that I have method:public static ObservableCollection<MyDataConcept> BuildDataConceptList(int year, int month){ ObservableCollection<MyDataConcept> resultList = new ObservableCollection<MyDataConcept>(); foreach (var data in GetDates(year, month)) { if (data.DayOf...
 c#                     1 answers                     85 view
 2018-10-22         Leo

Extract Month, Year (Netezza SQL)

My data type is a date formatted as "YYYY-MON-DD" and I would like to extract the month and year to be formatted as "MON YYYY" while keeping the data type as date so that I will be able to use it with the ADD_MONTHS function. Is there a way to do so? I extract the date from the data field called date_process.This is what I thought of but it doesnt seem to be working.SELECT TO_DATE(TO_CHAR(PROCESS_DATE,'YYYY-MON'), 'MON YYYY') AS PERIOD,Thank you. Dates are stored in an internal format, not as a string.If you want to see the value in a particular format, then you need to ...
 sql                     1 answers                     93 view
 2018-10-22         Troy

How to get ion-input type date to open calendar when on desktop/core

I have an ionic3/angular application that is also used on desktop/core. I have the typical...<ion-item> <ion-label></ion-label> <ion-datetime *ngIf="!platform.is('core')"></ion-datetime> //this line works just fine <ion-input type="date" *ngIf="platform.is('core')"></ion-input></ion-item>for the user to enter a date (birthdate, enrollment date, etc.). My problem is that ion-input doesn't seem to support type 'date.' It seems to be defaulting to some sort of text input. Setting it up as above DOES allow me to manually ...
 angular                     1 answers                     92 view