CODEWITHSUNDEEP
htmlcsstwitter-bootstrapstylesheet
Nick Gotch
Nick Gotch

Reputation: 9407

How to properly lay out columns in an HTML Bootstrap Treeview inline?

I'm using the Bootstrap Treeview library to display some hierarchical data on a page. I'm trying to have each node of the tree broken down into a few columns but I can't seem to get the elements to do it properly.

If I try using span elements in the text property of the tree like this:

<span style="background-color: yellow; width: 50%;">foo</span><span style="background-color: red; width: 50%">foo</span>

I get this output:

span tag results

If I try using div elements in the text property of the tree like this:

<div style="background-color: yellow; width: 50%;">foo</div><div style="background-color: red; width: 50%">foo</div>

I get output like this:

div tag results

I've tried various combinations all with similar mixed results. What can I do to make the columns all show up on a single line?

Upvotes: 1

Views: 594

Answers (1)

Keerthi
Keerthi

Reputation: 923

Div is a block element whereas span is not. Try inline-block styling on the div and give it some width.

div {
    display: inline-block;
    width: 50px;
}

Upvotes: 1

Related Questions