Dynamics 365 Portals using CSS to format Boolean values on an entity form

I have had several requests recently asking how to switch the Boolean fields on an entity list and wanted to discuss the method I used.

1. Below there is a standard Boolean attribute on an entity form

2. To find what elements on the form we need to change we can use the browser debugger (Edge in the example) by using the F12 Key

In the screenshot below we can see its #creditonhold

3. In your Dynamics 365 org that your portal is connected to open the web page that is displaying your entity form. In the custom CSS section enter the following where #creditonhold is the value from step 2:

#creditonhold {

float: left;

display: flex;

flex-direction: row-reverse;

}

4. Once the cache is invalidated you will now see the buttons are reflected. You will notice that the button is closer to the No than the Yes.                          

5. To align the buttons better add this this to the custom CSS section in your dynamics org.  The #creditonhold_0 value can be found by selecting the button in the debugger.  

#creditonhold_0{

margin-left: 10px;

}

With that change you should see the following