locked
How to make responsive button submit for all the screen size. RRS feed

  • Question

  • User-1355965324 posted

    How can I make the button submit more responsive when I shrink the page. Now when I shrink the page the  text of the button will be going out side of the button part. How can I  show the text inside of the button in all screen size

    Thanks

    Pol

    <div class="row">
                    <div class="col-sm-5">
                    </div>
                    <div class="col-sm-5">
                        <div class="center-block  col-sm-3">
                            <button type="submit" name="submitButton" value="Submit" class="btn btn-primary form-control">Save</button>
                        </div>
                        <div class="center-block  col-sm-3">
                            <button type="submit" name="submitButton" value="Back" class="btn btn-primary form-control">Back</button>
                        </div>
    
                        
                    </div>
    
                </div>

    Wednesday, October 21, 2020 12:01 PM

Answers

  • User475983607 posted

    Remove the form-control class.

    <div class="row">
        <div class="col-sm-5">
        </div>
        <div class="col-sm-5">
            <div class="center-block col-sm-3">
                <button type="submit" name="submitButton" value="Submit" class="btn btn-primary">Save</button>
            </div>
            <div class="center-block col-sm-3">
                <button type="submit" name="submitButton" value="Back" class="btn btn-primary">Back</button>
            </div>
        </div>
    </div>

    I recommend taking the time to read the bootstrap reference documentation.  The reference docs really help with understanding Bootstrap forms.

    https://getbootstrap.com/docs/4.0/components/forms/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 21, 2020 1:17 PM

All replies

  • User475983607 posted

    Remove the form-control class.

    <div class="row">
        <div class="col-sm-5">
        </div>
        <div class="col-sm-5">
            <div class="center-block col-sm-3">
                <button type="submit" name="submitButton" value="Submit" class="btn btn-primary">Save</button>
            </div>
            <div class="center-block col-sm-3">
                <button type="submit" name="submitButton" value="Back" class="btn btn-primary">Back</button>
            </div>
        </div>
    </div>

    I recommend taking the time to read the bootstrap reference documentation.  The reference docs really help with understanding Bootstrap forms.

    https://getbootstrap.com/docs/4.0/components/forms/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 21, 2020 1:17 PM
  • User-474980206 posted

    You are supposed to redesign for small devices. Try changing form -sm- to -md-. This will make all div 12 columns wide on a small device. Then pick column sizes for small or extra small.

    Wednesday, October 21, 2020 2:59 PM
  • User1312693872 posted

    Hi, polachan

    I tested your code and found when I shrink the page then the button can't show the full part.

    Because the column has a conflict with the button when shrinking, so I changed the column property to solve the problem, you can check:

    This is a bootstrap issue, you can view this link.

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-5">
                <div class="center-block  col-auto">
                    <button type="submit" name="submitButton" value="Submit" class="btn btn-primary form-control">Save</button>
                </div>
                <div class="center-block  col-auto">
                    <button type="submit" name="submitButton" value="Back" class="btn btn-primary form-control">Back</button>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="center-block  col-auto">
                    <button type="submit" name="submitButton" value="Submit" class="btn btn-primary form-control">Save</button>
                </div>
                <div class="center-block  col-auto">
                    <button type="submit" name="submitButton" value="Back" class="btn btn-primary form-control">Back</button>
                </div>
            </div>
        </div>
    </div>
    

    Result:

    Best Regards,

    Jerry Cai

    Thursday, October 22, 2020 8:22 AM
  • User-1355965324 posted

    Jerry

    It is not working. When I apply col-auto , the button length become too big . Thats why I given  the col-sm-3 to reduce the length of the button in big screen. But the problem is when I shrink the page  , the text go beyond the button.

    https://drive.google.com/file/d/1bkWIdOVdTGuHdi7UCucxLbmY3uWoVTKR/view?usp=sharing

    Friday, October 23, 2020 9:10 AM
  • User-1355965324 posted

    Many Thanks

    Friday, October 23, 2020 9:41 AM