What are the Bootstrap counterparts?

Question

User1134142769 posted

1. What are the Bootstrap analogues?
2. Or how to configure Bootstrap to look like WinForm?
 
I am using Bootstrap.
I don't like Bootstrap because it has big buttons.
I would like FrameWork elements which are similar to WinForm.
 
I have little experience with ASP.NET.

Answer 1

User415553908 posted

If you are after CSS framework recommendations, check out the following three:
Among other options, Zurb Foundation and Metro UI have good community support. Kendo UI is a commercial suite of components/UI elements that you could also look at.

Neither will likely address your specific concern of having big buttons, as it seems to be the present UX imperative to allow for touch-friendly sizes. You could however find that you might be able to customize it to your desired look and feel 

Answer 2

User1535942433 posted

Hi frmasp897654,

Accroding to your description,I suggest you could use btn-sm or btn-lg to reduce the size of buttons.Also,you could use css style to resize the button again.

Besides,you could apply custom css style to override default styles of bootstrap.

More details,you could refer to below codes:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <style>
        @media (max-width: 768px) {
            .btn-responsive {
                padding: 2px 4px;
                font-size: 80%;
                line-height: 1;
                border-radius: 3px;
            }
        }

        @media (min-width: 769px) and (max-width: 992px) {
            .btn-responsive {
                padding: 4px 9px;
                font-size: 90%;
                line-height: 1.2;
            }
        }
        .btn-lg {
            width:20%;
            height:50px;
        }
    </style>


 <div class="container-fluid">
            <h3>Change the viewport width for demo..</h3>
            <div class="row">
                <div class="col-md-12">
                    <h2>Bootstrap Responsive Buttons<p class="lead text-muted">Resize the browser to demonstrate</p>
                    </h2>
                    <button name="button" class="btn btn-default btn-responsive">Default</button>
                    <button name="button" class="btn btn-primary btn-responsive">Primary</button>
                    <button name="button" class="btn btn-info btn-responsive">Info</button>
                    <a class="btn btn-danger btn-responsive" href="#">Danger</a>
                    <a class="btn btn-warning btn-responsive" href="#">Warning</a>
                    <a class="btn btn-success btn-responsive" href="#">Success</a>
                </div>
                
                <div class="col-md-12">
                    <div class="btn-group">
                        <button class="btn btn-info btn-responsive">Left</button>
                        <button class="btn btn-info btn-responsive">Middle</button>
                        <button class="btn btn-info btn-responsive">Right</button>
                    </div>
                </div>
             
                <div class="col-md-12">

                    <button class="btn btn-primary btn-sm btn-responsive">Small</button>
                    <button class="btn btn-primary btn-responsive">Medium</button>
                    <button class="btn btn-primary btn-lg btn-responsive">Large</button>

                </div>
            </div>
        </div>

Result:

Best regards,

Yijing Sun

Answer 3

User1134142769 posted

Did I understand correctly:

- Bootstrap - Free

  - Zurb Foundation - Free
  - Metro UI - free
  - Kendo UI - paid
   ?

Answer 4

User415553908 posted

- Bootstrap - Free

  - Zurb Foundation - Free
  - Metro UI - free
  - Kendo UI - paid
   ?

correct