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?

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

2 Answers2

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:

Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126
  • 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 03 '16 at 05: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 03 '16 at 05: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 03 '16 at 05: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 '19 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 '19 at 16:46
  • have you read this? `(you should only use in extreme cases)` , the CSS appears inline in SPA because ir is generated by the frameworks – dippas Mar 30 '19 at 18:03
  • What confuses me is that classes like `d-flex` or `w-100` from Bootstrap are basically inline CSS but they're not considered bad practice... or are they? – Indiana Kernick Dec 20 '20 at 04:22
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;
}
Zeeshan Tariq
  • 21
  • 4