I want to put in Bootstrap a certain content that is text with two different styles, something like:
hello hello
O well:
hello hello
Basically using CSS properties that I already have defined in the h1, h2, h3, h4, etc.
My first idea was to put:
<div class="row">
<h1>hola</h1>
<h2>hola</h2>
</div>
h2 {
font-size: 1.3rem;
},
h4 {
font-size: 1rem;
}
<div class="row">
<h2>hola</h2>
<h4>hola</h4>
</div>
But the text stays aligned all the way to the left, I guess because it's inheriting from other sites. Then I start nesting by <div>
substituting the <h1>
and <h2>
but it gets complicated because then I have to "join" the div
so that they are next to each other, etc.
So I'm wondering: what's the best way to put two blocks of text together, each with a different style?
If you are going to use the class
row
, then the immediate child needs to be acol
. This serves to correct the negative margin that arow
( Grid layout ) has.For the elements to be displayed side by side you can use
d-inline
( Display utilities )Example
Although you already have 2 answers that solve the problem, I'll take a more conservative approach.
First of all, HTML elements have semantics that we should respect whenever possible.
From the documentation for type
<H1> ... <H6>
elements (title elements) we have:So my suggestion is: don't use header elements or title elements inconsistently . For this, Bootstrap provides us with the appropriate tool in CSS to do what you want without creating an HTML document with a confusing syntax for some use cases.
What you want to achieve you can do without any problem using a tag
span
, which is an inline container to which you can apply the stylesh1 ... h6
defined in your styles file.For example:
In this way we will be respectful of the purpose of the title tags. And we are using the tools that Bootstrap provides us (in this case) or those that we consider appropriate (custom styles).
As you can see, the first tag
<span>
uses the style assigned by Bootstrap to.h1
You must bear in mind that both the
div
and theh#
are block or dynamic content elements , that is, they will occupy the entire available width of their parent tag, which will cause other elements to move to the next line.If what you want is that both texts are next to each other, you must modify for them their
display
passing from:block
toinline
; the latter will make the elements line up next to each other.With a rule more or less like this:
In the context of your exercise, I don't see the need for the container div to have the class
row
and it would be enough, as they already mentioned, for them to have the classd-inline
like this:Why do it with Bootstrap if HTML provides a way to do it with tags?
You can also place a tag
<span>
inside the text block to apply a different style to with Bootstrap: