4

I was writing a code and I wanted it to be in a particular position for which I used padding

.The code looks like this.

    <div class="col-xs-12 col-sm-2" style="padding: 40px 5px 4px 4px;">
        <img src="img/logo.png" class="img-responsive">
    </div>

It works but I wanted to know that in the first line is it good practice to apply inline css to the Bootstrap class or should I do this whole thing by the use of Bootstrap?

4
  • it's totally fine to use inline styles together with Bootstrap, but if it repeats, create a class for it
    – moped
    Jul 3, 2016 at 5:34
  • applying inline css is a very bad practice. There are many options with Bootstrap that can be used Jul 3, 2016 at 5:35
  • Also don't even add a new class in Bootstrap framework classes better add a div inside and add a class...
    – vignesh
    Jul 3, 2016 at 5:39
  • @VijayanandPremnath very bad, if it's overused, not when you need to change behaviour of one or two particular elements ..
    – moped
    Jul 3, 2016 at 5:44

2 Answers 2

4

No

it is not, not even in Bootstrap or any project.

It is a BAD PRACTICE, (you should only use in extreme cases).

Use a Custom CSS and apply the desired styles there.

Here is an example:

/* Custom CSS */
[class^="col-"] {
  padding: 40px 5px 4px 4px;
  background: red
}
<!-- Bootstrap CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-2">
      <img src="//lorempixel.com/50/50" class="img-responsive">
    </div>
  </div>
</div>

You can see more info on this Stack Overflow answer

Articles mention inline style as bad practice:

7
  • 1
    if you need to use it twice on whole webpage, then there is no problem with that .. or is this the extreme case you're talking about ?
    – moped
    Jul 3, 2016 at 5:43
  • 1
    so what? it's not against what I'm saying.. it's not good to create 50 different classes only because you need to style 50 different images in blog .. IF it's part of template, then it makes sense to create a class to style all elements the same, but if it's styling of particular post/content, then you won't create class for every single piece you need to customize, because you would end up with same overwork..
    – moped
    Jul 3, 2016 at 5:51
  • the point is you don't need to create classes for every single thing you need to style, you can use CSS3 selectors, and target the elements and so on... The discussion here btw, is inline styling, and that is not a good practice.
    – dippas
    Jul 3, 2016 at 5:57
  • it is funny... at one point inline css was evil and now it is recommended and it is even used a lot in SPA js (angular, reactjs, etc...)
    – yeahman
    Mar 30, 2019 at 16:44
  • to answer.... yes you can use inline css if you are going to use it only once or twice and it is even recommended (why do you need to put it in a css if it is only used once)
    – yeahman
    Mar 30, 2019 at 16:46
0

Its fine but you can write the external CSS class with bootstrap class. Like:

HTML Page:

<div class="col-xs-12 col-sm-2 my-padding" >
        <img src="img/logo.png" class="img-responsive">
</div>

your_external_css:

.my-padding{
    padding: 40px 5px 4px 4px;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.