I need educational on span css

[shaibustephen]

I am customizing my article category. I want an instance where it creates only two columns up and three columns down.
The three down columns should be of equal size but the top two columns should be at a ratio 30/70 peent width.
How do I achieve this using span?
The column should collapse if there is nothing in it to avoid empty blank space

[waarnemer]

you don't by using span..

https://www.w3schools.com/tags/tag_span.asp

you use div

https://www.w3schools.com/tags/tag_div.asp

but maybe better to look at https://www.w3schools.com/html/html5_new_elements.asp for structural elements..

then check https://www.w3schools.com/css/css3_flexbox.asp on how to arrange all elements

[shaibustephen]

I am not too knowledgeable on using css. How do i use flex on the sample url you sent to me to get the below screen shot on my custom article category?

Screenshot.jpg

[Per Yngve Berg]

Do you use Bootstrap in your template and which version?

There is Bootstrap version 2, 3 and 4

https://getbootstrap.com/2.3.2/

[shaibustephen]

i am using bootstrap.4.3.1. How do i use this span as it doesn't have such css? what is the preferable way to get this done?

[Findozor]

use bootstrap classes

[Per Yngve Berg]

Bootstrap 4.3 does not have the span anymore. The syntax have changed. It's col-xx-yy.

https://getbootstrap.com/docs/4.3/layout/grid/

[helpwithjoomla]

Here's how you would do the code with bootstrap 4 and div's:

<div class="container">
<div class="row">
<div class="col-4">
1/3 of the container
</div>
<div class="col-8">
2/3 of the container
</div>
</div>

<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>

The class "col" is what divides each row horizontally. Since there are 12 columns, you divide the first row into 4 columns and 8 columns. The second row results in 3 equal columns (4-4-4).