Bootstrap datepicker adjust position and size on small browser screen RRS feed

  • Question

  • User1099429166 posted

    Dear All,

    My Bootstrap datepicker  currently displays at the bottom left of the textbox, thats ok in a normal browser window. But the issue comes when the browser window is made small. I want to make the datepicker display top left when the browser window is made small . Also on small screen I want the datepicker to become small also , but it should be readable and should also look good

    Any help would be greatly appreciated

    Friday, April 5, 2019 2:08 AM

All replies

  • User1099429166 posted

    Any one??

    Friday, April 5, 2019 9:46 AM
  • User1099429166 posted

    I tried this CSS  but they don't work for me

         @media (min-width: 768px) {
            .datepicker {
            float: left;
            width: auto;
            height: auto;
            @media  (min-width: 481px) and (max-width: 767px) {
                .datepicker {
                    width: auto;
                    height: auto;

    Please help!

    Friday, April 5, 2019 3:29 PM
  • User-2054057000 posted

    You will have to use CSS Media Queries in your style sheet to detect the screen size and then make the width of your Bootstrap Datepicker small. See the below:

    @media only screen and (min-width : 400px) and (max-width : 550px) {
        #date {
            width: 200px;
    //other styles for the screen size 481px to 540px

    Their is also another solution with Bootstrap. Here you have to integrated bootstrap in your web page and it will automatically do your work.

    You can refer to this tutorial for full knowledge on this topic - Using Bootstrap to Make Images Responsive in website


    Saturday, April 6, 2019 4:49 AM
  • User283528319 posted

    why don't you just use input with type=<g class="gr_ gr_214 gr-alert gr_gramm gr_inline_cards gr_run_anim Style replaceWithoutSep" id="214" data-gr-id="214">"date</g>"

    I am a nativist. I love native solutions even they are not as fancier as others.


    Saturday, April 6, 2019 11:00 AM
  • User61956409 posted

    Hi Sam Solomon,

    Please use browser F12 developer tools to select and check the styles that applied to the datepicker, and then you can modify and apply different styles to it based on the browser window size by using @media rule, the code may look like below.

    @media only screen and (max-width: 767px) {
        div.bootstrap-datetimepicker-widget {
            bottom: 45px !important;
            top: auto !important;
            /*background-color: orangered !important;*/

    With Regards,

    Fei Han

    Wednesday, April 17, 2019 6:54 AM