By default Bootstrap sets paragraph margins to zero, it also removes the default styles from lists (such as paddings/bullets).
The reason they do this is well explained, pretty clear and understandable.
Use case: we have a section of user-generated content on the page with applied Bootstrap 5 styles; this section contains paragraphs and lists, which we would like to be displayed with the default styles (such as: paragraphs have margins, lists have bullets etc).
Question: is there any way to do that without assigning classes to each paragraph / list and without redefining those styles again back to original?
Best solution would be some class applied to wrapper, which applies the default styles to all the children elements (i.e. 'resets the reset'), but reading Bootstrap docs did not help.
Thanks.
You may be able to wrap the content in a single element and use revert to undo Bootstrap's reset.
.normal-typography p,
.normal-typography h2,
.normal-typography ul {
margin: revert;
padding: revert;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="normal-typography">
<h2>Headings and paragraphs</h2>
<p>All heading elements—e.g., <code><h1></code>—and <code><p></code> are reset to have their <code>margin-top</code> removed. Headings have <code>margin-bottom: .5rem</code> added and paragraphs <code>margin-bottom: 1rem</code> for easy spacing.</p>
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ul>
<p>The <code><hr></code> element has been simplified. Similar to browser defaults, <code><hr></code>s are styled via <code>border-top</code>, have a default <code>opacity: .25</code>, and automatically inherit their <code>border-color</code> via <code>color</code>, including when <code>color</code> is set via the parent. They can be modified with text, border, and opacity utilities.</p>
</div>
Related
I wanted to make a nested sorted list with css counter. However, when I tried to do it with <ul> and <li> tags, I noticed that there were shifts in the <li> tags. How can I edit these shifts from a single center without typing padding-left?
Examples:
Original <ul> <li> tags.
Original ul li
What I want to do:
What I want to do.
The css properties I tried:
position: relative
&
position: absolute
I don't want to write the following for each element all the time: margins or paddings.
ty so much my dear friends...
I'm completely new to HTML and CSS, so please bear with me.
I want to change the color of an individual list item in an ordered list, but I don't want the list number to change style. I also need to do this within the one html-document -- no separate CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Test-page </title>
</head>
<body>
<h1> An html-file </h1>
<ol>
<li> Item 1 </li>
<li style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
</body>
</html>
The only thing I can think of to solve this using inline styling, is:
<ol>
<li> Item 1 </li>
<li><p style="color:blue"> Item 2 </li>
<li> Item 3 </li>
</ol>
But the list items will appear to be separate paragraphs.
I don't want to use the font-tag, and I want to use HTML5. I want it to be as short as possible, in one file, therefore inline styling.
Any CSS rule that you set on a li element also applies to the list item marker (bullet, number). This is inconvenient, and CSS still lacks any way to style the list marker separately.
So your approach of using something like <li><p style="color:blue"> Item 2 </li> is the workaround you need to use, but when selecting the added inner element, you need to consider the consequences. A p element has default top and bottom margin, so using it, you would need to remove them here:
<li><p style="color:blue; margin:0"> Item 2 </li>
A simpler way is to use div instead of p, since div is a semantically emply block-level container element, which causes no change in default rendering except that its content starts on a fresh line and the content after it starts on a fresh line, which happens here anyway due to the list markup. So:
<li><div style="color:blue"> Item 2</div></li>
Instead of div, you can use span, if there is only inline (phrase-level) content. But div is more flexible, as it allows elements like inner lists, tables, etc.
LIke this
demo
css
ol li span{
color:blue;
}
Try using the span tag in place of p. And don't forget to close the tags properly:
<ol>
<li><span style="color:blue">Item 2</span></li>
</ol>
All the best.
<li><span style="color:blue">Item</span>2</li>
I have a set of columns on my site. Each item is an <a> within an <li> and a member of an <ul>. The columns are set up so that the top-most <li> has a different class from the lower <li>'s in the same list (<ul>).
In IE7, the top <li> element will not align appropriately with it's lower neighboring <li>'s.
Here is how it should look (Latest version of Google Chrome):
Here is how it looks in IE7 (looks fine in >=IE8):
**Don't mind sizing differences.*
Here is the trimmed HTML for a single column
<div class="map-col" id="map-2">
<ul class="site-map">
<li><a class="map-upper">Services</a></li>
<li>Wood Fencing</li>
<li>Ornamental Iron</li>
<li>Gates and Openers</li>
<li>Restoration</li>
</ul>
</div>
Here is the CSS (I pulled out anything that didn't have to do with positioning --such as font-weight and font-size-- for readability)
.site-map{display:inline;}
.map-col{display:block; width:150px;}
.map-upper{text-align:left;}
.map-lower{*text-align:left;}
#map-1{float:left;}
#map-2{float:left;}
#map-3{float:left;}
#map-4{float:left;}
As far as it seems to me, IE7 just doesn't like when two separate CSS classes are appended to a single list.
Don't define text-align property for anchor tags.. Use it in LI. i.e
ul.site-map li{
text-align:left;
}
I was able to figure it out. For anyone with this issue in the future here is the simple fix:
It appears that IE7 has an indentation/margin bug on list elements. To get around this, the I modified the <li> elements to have a defined width of 100% so that they will fill the entire area of the <ul>. This allows the text to be left aligned correctly.
Added the following:
.site-map li{display:block; width:100%; text-align:left;}
I know that it's incorrect to style a <section> tag but how about the <header> and <footer> tags. If using these tags provides a more semantic markup then they should be used, however, if they can't be styled then a <div> would still need to be inserted inside the tag to wrap the content and style it.
I know that <header> can be styled but I'm not sure if it's correct to do so.
So the question is: Should html5 tags be styled or should a <div> be placed inside to take care of the styling?
Nothing in the spec says you can't or shouldn't style HTML5 elements such as <section> or <article>. It only says that you shouldn't place a semantic HTML5 element somewhere 'for the sake of' styling something. Use a <div> instead.
So if you have a semantic reason to add the <section> or <article> somewhere, then by all means add it AND also feel free to style it as well. But if you have to wrap a section of your mark-up for styling purposes (eg. to add a border, or float left etc.), but that section does not have any semantic meaning in your mark-up, then use a <div>.
For instance:
<div class="mainBox">
<nav class="breadcrumbs">
<ol>
<li>...list of links (snip)....</li>
</ol>
</nav>
<section>
<h1>Latest Tweets From Twitter</h1>
<article>
//... a Tweet (snip)... //
</article>
<article>
//... a Tweet (snip)... //
</article>
//... lots more Twitter posts (snip)... //
</section>
</div>
The <section> element is the main part of your page (ie. your list of tweets) and also has a heading at the start which is required. But it's wrapped in a div.mainBox element because maybe you want to wrap a border around the both the breadcrumbs and section parts, ie. it's purely for styling. But there's nothing to stop you styling the <section> and <article> elements also.
It's is not incorrect to style these tags, but they are not solely for styling purposes as they serve a semantic function. By all means style the elements that you need to use, but don't add them to achieve styles thereby ruining the semantics.
Having said that you must also beware of styling them as they are not recognised by all browsers. For example IE6 and 7 will not apply the styles as they won't recognise the element names. You can get around this in IE7 using ARIA tags which will allow you some styling control.
I have a menu that will be automatically created in an asp.net page. I'm trying to use a pure CSS cross browser menu but how can i set it so that each subsequent child is autohiden/shown w/o having to define the style for each level of the menu.
Is this the only way to accomplish this with css?
Essentially im looking for a way to use css to show/hide the child menu items w/o having to define the style for every level - especially since i dont know how many levels there will be.
you should be able to do it by only specifying down to the second level
<html>
<head>
<style>
.mnusub li ul{ display:none; }
.mnusub li:hover > ul{ display: block; }
</style>
</head>
<body>
<ul class="mnusub">
<li>test1
<ul class="mnusub">
<li>test2</li>
<li>test11
<ul class="mnusub">
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
</li>
</ul>
</li>
<li>test5
<ul class="mnusub">
<li>test6</li>
<li>test7</li>
<li>test8</li>
</ul>
</li>
<li>test9</li>
<li>test10</li>
</ul>
</body>
</html>
The key here is the ">" selector as it specifies direct descendants and not sub-descendants
enjoy
When you want to affect each child individually, but without having to make style rules for each of those children, then you need more logic, which CSS doesn't provide. You could use something like PHP for that logic, or you could go with Javascript/jQuery. In that case, you can toggle CSS classes on child[x] through jQuery, and you only need to style those classes. Then it wouldn't matter which child got the class, it would be styled accordingly. Note that you should first make sure your menu is at least usable without Javascript, so users aren't dependent upon it.