Question

I’m trying to write an NCAA bracket submission app, but I’m having trouble figuring out how to arrange the HTML elements in the shape of a bracket like this. I’d like to use Bootstrap to keep the UI looking clean, but I’m not tied to it. Any advice?

Answer 1

There are great sample HTML/CSS brackets using divs be found here. Alternatively, a good example of a two sided HTML/CSS bracket using unordered lists can be found here. Check out the source code and figure out what works best for you.

I think a better approach would be to use an HTML table with a specific CSS border for each cell. I have created a rough example below. But you’ll probably want to play around with it yourself, check out the links, and see what works best for your app. Best of luck!

HTML:

<table>
    <tr>
        <td><p>1. Team Name</p></td>
        <td rowspan="2"><p>Team Name</p></td>
        <td rowspan="4"><p>Team Name</p></td>
    </tr>
    <tr>
        <td style="border-right:1px solid black"><p>4. Team Name</p></td>
    </tr>
    <tr>
        <td ><p>2. Team Name</p></td>
        <td rowspan="2"><p>Team Name</p></td>
    </tr>
    <tr>
        <td style="border-right:1px solid black"><p>3. Team Name</p></td>
    </tr>
</table>

CSS:

table {
  border-collapse: collapse;
  border: none;
}

td {
  vertical-align: middle;
  width: 10em;
  margin: 0;
  padding: 0;
}

td p {
  border-bottom: solid 1px black;
  margin: 0;
  padding: 5px 5px 2px 5px;
}

JS Fiddle Example