Alle abgerundeten Umrandungen in Bootstrap ausschalten.

Ich nutze für meine Projekte gerne das Framework Bootstrap. Allerdings gefallen mir die abgerundeten Elemente nicht besonders.

Fügt man diesen CSS-Code nach dem Einbinden von Bootstrap, werden alle Abrundungen abgeschalten:

.alert,.breadcrumb,.btn,.btn-group-lg>.btn,.btn-group-sm>.btn,.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group-vertical>.btn:not(:first-child):not(:last-child),.btn-group-xs>.btn,.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle),.btn-lg,.btn-link,.btn-sm,.btn-xs,.container .jumbotron,.dropdown-menu,.form-control,.form-horizontal .form-group-lg .form-control,.form-horizontal .form-group-sm .form-control,.img-rounded,.img-thumbnail,.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon,.input-group-addon.input-lg,.input-group-addon.input-sm,.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn,.input-lg,.input-sm,.label,.modal-content,.nav-pills>li>a,.nav-tabs-justified>li>a,.nav-tabs.nav-justified>li>a,.nav-tabs>li>a,.navbar-toggle,.pager li>a,.pager li>span,.pagination,.panel,.panel-group .panel,.panel>.list-group .list-group-item,.popover,.progress,.thumbnail,.tooltip-inner,.well,.well-lg,.well-sm,code,kbd,pre,pre code{border-radius:0}@media (min-width:768px){.nav-tabs.nav-justified>li>a,.navbar,.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top,.list-group-item:first-child,.list-group-item:last-child{border-radius:0}}

Oder ausführlich:

.img-thumbnail, code, kbd, pre, pre code, .form-control, .input-sm, .form-horizontal .form-group-sm .form-control, .input-lg, .form-horizontal .form-group-lg .form-control, .btn, .btn-link, .btn-lg, .btn-group-lg > .btn, .btn-sm, .btn-group-sm > .btn, .btn-xs, .btn-group-xs > .btn, .dropdown-menu, .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .btn-group-vertical > .btn:not(:first-child):not(:last-child), .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn, .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child), .input-group-addon, .input-group-addon.input-sm, .input-group-addon.input-lg, .nav-tabs > li > a, .nav-tabs.nav-justified > li > a, .nav-pills > li > a, .nav-tabs-justified > li > a, .navbar-toggle, .breadcrumb, .pagination, .pager li > a, .pager li > span, .container .jumbotron, .thumbnail, .alert, .progress, .panel, .panel > .list-group .list-group-item, .panel-group .panel, .well, .well-lg, .well-sm, .modal-content, .tooltip-inner, .popover, .nav-pills > li > a, .label, .img-rounded, .list-group-item:first-child, .list-group-item:last-child { border-radius: 0; }

@media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-radius: 0 0 0 0; }

.navbar-static-top, .navbar-fixed-top, .navbar-fixed-bottom, .navbar { border-radius: 0 0 0 0; }

}

Update am 09.04.2015: Die Elemente .list-group-item:first-child und .list-group-item:last-child wurden hinzugefügt.