Adding Spacing to Bootstrap List-Twitter bootstrap

Joshylad
May 14, 2019
103 views
0 votes
2 Answers

I am very new to html and twitter bootstrap but guessing that there is a very simple fix that I am just missing. I have got 3 columns that consist of a radio button and 2 text columns the issue I am having is that there is no spacing between the 2 text columns but there is between the radio button and the first text field.

I have tried playing around with the row sizes “div class=”row-sm-4” but to no luck

<div class="col" style="overflow:auto;height:60vh;">
                    <div class="col-sm-12" style="max-height:10%;" ng-repeat="FoundAlises in SearchResults" ng-class="GetClassForSearchResult(FoundAlises)">
                       <div class="row mb-1"> 
                            <div class="col-sm-1 mt-12">
                                <input class="cursorPointer" type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults" ng-click="OnSearchClicked(FoundAlises)">
                            </div>
                            <div class="row-sm-4">
                                <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small></small>
                                <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small></small>
                            </div>
                        </div>
                    </div>

The following is the area where I am having the issue

    <div class="row-sm-4">
       <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small></small>
       <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small></small>
    </div>

I expect the output to be all on one line and have equal spacing between all 3 columns. One thing to note but not sure if this will have any impact is results that are displayed can be different lengths of text. I was hoping that in these cases all of the text in the same column would be inline eg all of the ‘Alias :’ labels would be in line in 1 column and all of the ‘Tag :’ labels would be inline in the next column

Expected output

|Radio Button|       Alias: **********       Tag:*******  
|Radio Button|       Alias: ************     Tag:******* 
|Radio Button|       Alias: *******          Tag:**********

Current Output

|Radio Button|       Alias: **********       Tag:*******  
|Radio Button|       Alias: ************       Tag:******* 
|Radio Button|       Alias: *******       Tag:**********

Answers

I’ve made some changes to your code using bootstrap and inline styles by declaring element width as a percentage and using display: inline-block; to keep the rows on the same line, like so:

<div class="col" style="overflow:auto;height:60vh;">
  <div class="col-sm-12" style="max-height:10%;" ng-repeat="FoundAlises in SearchResults"
    ng-class="GetClassForSearchResult(FoundAlises)">
    <div class="row mb-1">
      <input style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1 m-3"
        type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults"
        ng-click="OnSearchClicked(FoundAlises)">
      <small style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</small>
      <small style="width: 30%; float: right;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
    </div>

    <div class="row mb-1">
      <input style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1 m-3"
        type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults"
        ng-click="OnSearchClicked(FoundAlises)">
      <small style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
        minim veniam.</small>
      <small style="width: 30%; float: right;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
    </div>

    <div class="row mb-1">
      <input style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1 m-3"
        type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults"
        ng-click="OnSearchClicked(FoundAlises)">
      <small style="width: 30%; display: inline-block;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
      <small style="width: 30%; float: right;" class="cursorPointer align-text-top p-1"
        ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small>Lorem ipsum dolor sit
        amet, consectetur adipiscing elit.</small>
    </div>

  </div>

Hopefully that helps. Let me know if that wasn’t what you are looking for.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col" style="overflow:auto;height:60vh;">
  <div class="col-sm-12" style="max-height:10%;" ng-repeat="FoundAlises in SearchResults" ng-class="GetClassForSearchResult(FoundAlises)">
     <div class="row mb-1"> 
          <div class="col-sm-1">
              <input class="cursorPointer" type="radio" ng-model="$parent.SelectedSearchResult" ng-value="FoundAlises" name="AliasSearchResults" ng-click="OnSearchClicked(FoundAlises)">
            </div>
          <div class="col-sm-1">
              <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Alias : <small ng-bind="FoundAlises.Alias"></small></small>
          </div>
          <div class="col-sm-1">
            <small class="cursorPointer" ng-click="OnSearchClicked(FoundAlises)">Tag : <small ng-bind="FoundAlises.Tag"></small></small>
          </div>
      </div>
  </div>
</body>
</html>

This might helps you !

Please signup or login to give your own answer.

Click here to cancel reply.