Issue with bootstrap css

I have a bootstrap css class.
Is there any quick way to check how this css class will look like in UI without writing code ?

alternatively , is there any website where I may put the bootstrap class name and it will just show how this css will look like in page ?

Thans

Codepen is a good place to experiment with code, html, css and javascript.
If you go into Settings - CSS - you can add Bootstrap as an external css via the “Quick-add” options.
Then add whatever css you like to the css editor.

visited the site…did these following steps :

If you go into Settings - CSS - you can add Bootstrap as an external css via the “Quick-add” options.

Ok…done…I added bootstrap here : http://prntscr.com/cu7a0c

Then add whatever css you like to the css editor.

what to write in css editor ? I wrote this : http://prntscr.com/cu79c1
No visual output.
Is that writing correct ?

I want to check bootstrap css “list-group-item-text”. …wish to view how this css looks in UI in a quick way ?

Do you mean UA?

That looks like a bootstrap class. Why not put it on a page, add some content, and view the results in your UA (browser?).?

Do you mean UA?

yes…browser.

I am checking few selected bootstrap CSS from the lib. and looking for a quick check for some way without much code writing to view how they look.

I don’t use bootstrap, but I would think that the purpose of those classes is described in their documentation. If it’s anything like typical CSS, then how it renders depends somewhat on context, so it might be difficult to predict outside of any context. Just guessing about that.

Have you tried looking it up in bootstrap’s docs?

You can simply use a FF web developer extension (or chrome or whatever) and add the class to whatever item you want to check. Changes are not saved so it is great to check how things look.

If you want to do that, bootstrap’s documentation does show how things look depending on the CSS you use. Not with every single class but with many of them.

2 Likes

Well there is no html to apply the css to.
You would have to write some html with whatever bootstrap classes or classes of your own defined in the css section.
I just have a hard time understanding the idea of seeing the results of code, without actually writing any code. :shifty:

That is usually the easiest way to experiment with code. Codepen can be handy as you can include those frameworks, without actually having them. I mainly use it just to share things here.

Dev tools are a good way to tinker with code without committing to file, great for debugging.

2 Likes

You would have to write some html with whatever bootstrap classes or classes of your own defined in the css section.

Ok…done.

Still no CSS effect is visible. please see this screenshot

That class is applying line-height and margin-bottom.
Not visually obvious, but it’s doing something.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.