standard bootstrap template issues with textfield and datetimepicker

Question

I am using the standard MVC bootstrap template and got a few issues:

1) See the screenshot below. How can I get rid of the cross from appearing in the textfield with focus?

2) The text in the date is too left aligned unlike all the other fields. I am using the bootstrap datetimepicker here.

Answer 1

You will have to create a custom.css class to overwrite the default bootstrap.css.and place a link reference of your custom.css below bootstrap.css

1. In getting rid of the cross, right click on it, navigate to inspect in your browsers context menu. Take a look at the inspector, The cross and the border color are triggered by the focus state of the Textbox. In Chrome click :hov and select :focus, this will display the css that styles the text control when it is clicked. You should find the element that styles the Cross. Simply copy the whole class into your custom.css and remove the attribute that styles the cross
2. For the Datapicker you need to rightclick on the date displayed go to inspect, copy the class into your custom.css and add padding-left of the desired pixels you want eg padding-left:20px;

Sample Inspector In Chrome