Commonly used css code, excerpted from Bootstrap4.css

tags: front end  bootstrap  css

# Create a new general.css file

.m-0 {
  margin:0!important
}
.mt-0 {
  margin-top:0!important
}
.mr-0 {
  margin-right:0!important
}
.mb-0 {
  margin-bottom:0!important
}
.ml-0 {
  margin-left:0!important
}
.m-1 {
  margin:.25rem!important
}
.mt-1 {
  margin-top:.25rem!important
}
.mr-1 {
  margin-right:.25rem!important
}
.mb-1 {
  margin-bottom:.25rem!important
}
.ml-1 {
  margin-left:.25rem!important
}
.m-2 {
  margin:.5rem!important
}
.mt-2 {
  margin-top:.5rem!important
}
.mr-2 {
  margin-right:.5rem!important
}
.mb-2 {
  margin-bottom:.5rem!important
}
.ml-2 {
  margin-left:.5rem!important
}
.m-3 {
  margin:1rem!important
}
.mt-3 {
  margin-top:1rem!important
}
.mr-3 {
  margin-right:1rem!important
}
.mb-3 {
  margin-bottom:1rem!important
}
.ml-3 {
  margin-left:1rem!important
}
.m-4 {
  margin:1.5rem!important
}
.mt-4 {
  margin-top:1.5rem!important
}
.mr-4 {
  margin-right:1.5rem!important
}
.mb-4 {
  margin-bottom:1.5rem!important
}
.ml-4 {
  margin-left:1.5rem!important
}
.m-5 {
  margin:3rem!important
}
.mt-5 {
  margin-top:3rem!important
}
.mr-5 {
  margin-right:3rem!important
}
.mb-5 {
  margin-bottom:3rem!important
}
.ml-5 {
  margin-left:3rem!important
}
.p-0 {
  padding:0!important
}
.pt-0 {
  padding-top:0!important
}
.pr-0 {
  padding-right:0!important
}
.pb-0 {
  padding-bottom:0!important
}
.pl-0 {
  padding-left:0!important
}
.p-1 {
  padding:.25rem!important
}
.pt-1 {
  padding-top:.25rem!important
}
.pr-1 {
  padding-right:.25rem!important
}
.pb-1 {
  padding-bottom:.25rem!important
}
.pl-1 {
  padding-left:.25rem!important
}
.p-2 {
  padding:.5rem!important
}
.pt-2 {
  padding-top:.5rem!important
}
.pr-2 {
  padding-right:.5rem!important
}
.pb-2 {
  padding-bottom:.5rem!important
}
.pl-2 {
  padding-left:.5rem!important
}
.p-3 {
  padding:1rem!important
}
.pt-3 {
  padding-top:1rem!important
}
.pr-3 {
  padding-right:1rem!important
}
.pb-3 {
  padding-bottom:1rem!important
}
.pl-3 {
  padding-left:1rem!important
}
.p-4 {
  padding:1.5rem!important
}
.pt-4 {
  padding-top:1.5rem!important
}
.pr-4 {
  padding-right:1.5rem!important
}
.pb-4 {
  padding-bottom:1.5rem!important
}
.pl-4 {
  padding-left:1.5rem!important
}
.p-5 {
  padding:3rem!important
}
.pt-5 {
  padding-top:3rem!important
}
.pr-5 {
  padding-right:3rem!important
}
.pb-5 {
  padding-bottom:3rem!important
}
.pl-5 {
  padding-left:3rem!important
}
.text-left {
  text-align:left!important
}
.text-right {
  text-align:right!important
}
.text-center {
  text-align:center!important
}
.text-muted {
  color:#6c757d!important
}
.text-primary {
  color:#007bff!important
}
.text-success {
  color:#28a745!important
}
.text-info {
  color:#17a2b8!important
}
.text-warning {
  color:#ffc107!important
}
.text-danger {
  color:#dc3545!important
}
.text-secondary {
  color:#6c757d!important
}
.text-dark {
  color:#343a40!important
}
.text-light {
  color:#f8f9fa!important
}
.text-white {
  color:#fff!important
}
.bg-primary {
  background-color:#007bff!important
}
.bg-secondary {
  background-color:#6c757d!important
}
.bg-success {
  background-color:#28a745!important
}
.bg-info {
  background-color:#17a2b8!important
}
.bg-warning {
  background-color:#ffc107!important
}
.bg-danger {
  background-color:#dc3545!important
}
.bg-light {
  background-color:#f8f9fa!important
}
.bg-dark {
  background-color:#343a40!important
}
.bg-white {
  background-color:#fff!important
}
.bg-transparent {
  background-color:transparent!important
}
.border {
  border:1px solid #dee2e6!important
}
.border-secondary {
  border-color:#6c757d!important
}
.border-success {
  border-color:#28a745!important
}
.border-info {
  border-color:#17a2b8!important
}
.border-warning {
  border-color:#ffc107!important
}
.border-danger {
  border-color:#dc3545!important
}
.border-light {
  border-color:#f8f9fa!important
}
.border-dark {
  border-color:#343a40!important
}
.border-white {
  border-color:#fff!important
}

Intelligent Recommendation

[CSS] CSS commonly used styles (on)

display: The commonly used values ​​of the display attribute are as follows: 1. inline: used to convert block-level elements into inline elements, for example: On the page is the following effect: Obv...

Commonly used HTML+CSS

The basic technology that front-end engineers should master: HTML+CSS+JavaScript 1 Introduction to HTML 1.1. What is HTML? (To understanding) HTML is an abbreviation for HyperText Markup Language (HTM...

Commonly used css style

First, remove the input default style...

Commonly used CSS framework

Commonly used CSS framework When I was writing my own personal website, because my web front end was not particularly good, I went to the relevant CSS framework to build the page. Find one of the foll...

More Recommendation

Commonly used css-fix

Set the frequently used css property to class and import it when needed. Set the element to block and center horizontally Let text not wrap, text beyond the border is displayed as an ellipsis Let text...

Commonly used CSS

1. Turn a colored picture into a black and white picture 2. Apply/cancel border on navigation: not() 3. Add a shadow at the top of the page (CSS3) 4.body adds row height 5. Center all elements vertica...

css commonly used tags

Add empty cell html Only need to write the above code in the required position is empty vertical-align the vertical alignment property Can be aligned at the bottom, top alignment   Create a trans...

Commonly used CSS hack

First, what is the CSS Hack? Different browsers parse the results of CSS is different, so the effect will lead to different pages of the same CSS output, which requires CSS Hack to resolve compatibili...

A collection of commonly used CSS

1, horizontal and vertical scrollbars removed 2, the drag is not provided textarea 3, div plus the border style 4, adjust the icon size 5, the positioning adjustment of the mask layer  ...

Copyright  DMCA © 2018-2026 - All Rights Reserved - www.programmersought.com  User Notice

Top