Here is the code snippet that I am working with:
<div class="row">
<div class="col-md-2">
<div class="dropdown">
<button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="drop down" aria-haspopup="true" aria-expanded="false">
Generate Report <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
<li>
<a href="#" data-bind="reportExportTypeText: exportType, click: $root.OnGenerateReportClick.bind($root, exportType)"></a>
</li>
</ul>
</br>
</div>
</div;
<div class="col-md-offset-8 col-md-2">
<button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
</div>
</div>
The above code renders correctly with alignment like this:
https://i.sstatic.net/5yNU6.png
However, when I introduce the following additional code snippet:
<div class="col-md-1">
<button type="button" class="btn btn-bee-space-blue buttonWidth" data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' },
enable: ReportingEditEnabled"> Email Report</button>
</div>
This causes a misalignment of buttons as shown in the image:
https://i.sstatic.net/x2FG0.png
Below is an updated version of the full code including the new button:
<div class="row">
<div class="col-md-2">
<div class="dropdown">
<button type="button" class="btn btn-bee-space-blue dropdown-toggle buttonWidth" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Generate Report <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" data-bind="foreach: { data: ReportExportTypes, as: 'exportType' }">
<li><a href="#" data-bind="reportExportTypeText: exportType, click: $root.OnGenerateReportClick.bind($root, exportType)"></a></li>
</ul>
</br>
</div>
</div>
<div class="col-md-1">
<button type="button" class="btn btn-bee-space-blue buttonWidth" data-bind="click: EmailPopup, tooltip: { title: 'Get report to your email' },
enable: ReportingEditEnabled"> Email Report</button>
</div>
<div class="col-md-offset-8 col-md-2">
<button class="btn btn-bee-grey buttonWidth pull-right BackToScorecard" data-bind="click: $root.BackToScorecard, tooltip: { title: 'Back to Scorecard' }">Back to Scorecard</button>
</div>
</div>
I am trying to ensure that my Generate Report, Email Report and Back to scorecard buttons all appear in the same row.