DNNSharp Action Form + Bootstrap 4 Tweaks

If you're using a DNN theme that uses Bootstrap 4 and you want to get DNN Sharp's Action Form working well, here are some helpful tweaks. 

Prerequisites

Typically these are the first options I configure when adding a new Action Form:

1. General Settings > UI & Layout
   1. Template: bootstrap
   2. Label Align: Top
   3. Label Width: 12/12 columns
   4. Include Bootstrap: uncheck

The Core CSS

My CSS includes a few fixes to correct: columns, required field indicators, some simple spacing, checkbox/radio button styles, some conversions of icons to use Font Awesome 5, fix date and time picker styles, and fix the file upload table. This is meant as a sort of starter so you might need to adjust it for your own needs.

/* fix the column layouts */
.c-form .form-group {
  display: flex;
  margin: 0 -15px
}
@media (max-width:767px) {
  .c-form .form-group {
    flex-direction: column
  }
  .c-form .form-group .field-container {
    max-width: 100% !important
  }
}
@media (min-width:768px) {
  .c-form .form-group {
    flex-direction: row
  }
}

/* give required fields a red asterisk */
.c-form .form-group label.control-label.required:after {
  content: "*";
  display: inline-block;
  color: #FF0000;
  margin-left: 5px;
  font-size: 15px;
  line-height: 1em;
  vertical-align: top
}

/* simple margins for paragraphs inside form groups */
.form-group p {
  margin-bottom: 5px
}

/* checkbox and radio button styles */
.checkbox, .radio {
  margin-left: 0 !important
}
.checkbox label, .radio label {
  position: relative;
  padding-left: 30px
}
.checkbox label input, .radio label input {
  position: absolute;
  left: 0;
  top: 6px
}
.checkbox label span, .radio label span {
  position: relative;
  top: 1px;
  font-size: 17px
}

/* fix "display horizontally" for inline radio buttons and checkboxes */
.radio-inline,
.checkbox-inline {
    display: inline-flex;
    margin-right: 20px;
}

.radio-inline input,
.checkbox-inline input {
    margin-right: 5px;
}

/* convert glyphicon classes to FontAwesome 5 icons */

.glyphicon::before {
	display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.glyphicon-chevron-left::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f104";
}

.glyphicon-chevron-right::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105";
}

.glyphicon-info-sign::before {
	font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f059";
}

/* give popovers style */
.popupOnHover {
	width: 15px;
	height: 15px;
	cursor: pointer;
}

/* fix date and time picker popup */
.fix-date-time .container-btn-vertical-center .btn.btn-default {
	padding: 0 20px;
	box-shadow: none;
	line-height: 42px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.datetime-picker-dropdown li.ng-scope .btn-group .btn {
	border: none;
	box-shadow: none;
}

/* fix file upload table */

.fileupload-buttonbar + table.table.files {
    margin-bottom: 0 !important;
    font-size: 13px;
}
.fileupload-buttonbar + table.table.files td {
    padding: 15px !important;
    border: none !important;
}

.fileupload-buttonbar + table.table.files td button.cancel {
    padding-left: 20px;
    padding-right: 20px;
    background: #d9534f;
    border-color: #d9534f;
    font-weight: 400 !important;
    font-size: 13px !important;
}
.fileupload-buttonbar + table.table.files td button.cancel:hover {
    background: #C03A36;
    border-color: #C03A36;
}

.fileupload-buttonbar .progress {
    margin-bottom: 0 !important;
}

Load Popper.js Earlier

Bootstrap 4 uses Popper.js. I noticed a problem where if you configure "Show Tooltips" under UI & Layout settings of General Settings in Action Form, then the tooltips don't appear. If you're configured your Action Form to use tooltips then you need to make sure Popper.js loads earlier in the skin. I use a tag that looks like this:

<dnn:DnnJsInclude runat="server" FilePath="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ForceProvider="DnnFormBottomProvider" Priority="0" />

Please note: If using tooltips in your Action Form, make sure to include the necessary icon CSS as the icons may not show up in Bootstrap 4 if you're not loading the Glyphicon set.

Bonus: Number the fields dynamically

I recently had a client who wanted the fields to be numbered. It would be a pain to add the numbers manually to each field as that requires updates if new fields were added or fields were reordered. So I made some simple CSS to handle that.

.c-form {
    counter-reset: my-awesome-counter;
}

.c-form .field-container {
    counter-increment: my-awesome-counter;
    position: relative;
}

.c-form .field-container .control-label::before {
    content: counter(my-awesome-counter) ". ";
    color: #666;
    font-weight: 400;
    display: inline-block;
    margin-right: 5px;
}