CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
whyj
whyj

Reputation: 35

Are there any ways to obtain the style properties of a specific bootstrap class?

I'm currently working on a website in html and css, and it's my first time using bootstrap in my code. I immediately stumbled across a problem, I found it very difficult to customize a bootstrap class to use it in my own website because I can't find a way to check the style properties of that bootstrap class.Is there a solution to this?

Upvotes: 3

Views: 1076

Answers (4)

Rayees AC
Rayees AC

Reputation: 4659

try this instead,

To customize bootstrap visit here.

Add to style to specific class in bootstrap makes to override the style. that is

.btn.btn-primary{
  margin:20px;
  border-radius:60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button type="button" class="btn btn-primary">Primary</button>

Upvotes: 0

Isaac.mm
Isaac.mm

Reputation: 76

If you want to create your own css class do this.This code is bad practice. because we use important css property. Important property in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by ! important is to be applied. This rule overrides all previous styling rules ​-- the !important property increases its priority.
That means we override Bootstrap css property . With our own css class this will not cause any issue to Bootstrap but if you use !important to Bootstrap css class it will cause a problem when you are doing a big project.

.mybutton {
  margin: 20px 20px;
  border-radius:100px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button type="button" class="btn btn-primary mybutton">Primary</button>

Or you can use like this too.But if you want to create your own class I prefer above.

.btn.btn-primary{
  margin:20px;
  border-radius:60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button type="button" class="btn btn-primary">Primary</button>

Upvotes: 0

Anita
Anita

Reputation: 1

Get the bootstrap CSS offline. I don't know the kind of text editor you are using but using sublime editor, you can get the line of a css property by putting the cursor at the property you want to find in the html code. or better still use the find option, mostly ctrl + F

Upvotes: 0

Robin V
Robin V

Reputation: 93

You can view the compiled bootstrap css files to find the style properties for specific classes. It's usually easier to do this with un-minified files.

In case you don't know where to find this file:

  • Go to https://github.com/twbs/bootstrap/releases and find the version of Bootstrap you're using
  • Under that version, download the bootstrap-[version]-dist.zip file, and unpack it
  • Inspect the bootstrap.css file under the css folder and search for the class you want to know more about

Upvotes: 4

Related Questions