Skip to content

Instantly share code, notes, and snippets.

@souri-t

souri-t/bootstrap5_row_test.index

Created July 25, 2022 17:22
Show Gist options
  • Save souri-t/c896bba49938d117603f8aabbcef17d7 to your computer and use it in GitHub Desktop.
Save souri-t/c896bba49938d117603f8aabbcef17d7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap5_row_test.index
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- header -->
<div class="row flex-nowrap">
<div class="col border-start border-end-1">
Index
</div>
<div class="col border-start border-end border-bottom">1</div>
<div class="col border-start border-end border-bottom">2</div>
<div class="col border-start border-end border-bottom">3</div>
<div class="col border-start border-end border-bottom">4</div>
<div class="col border-start border-end border-bottom">5</div>
<div class="col border-start border-end border-bottom">6</div>
<div class="col border-start border-end border-bottom">7</div>
</div>
<!-- data -->
<div class="row flex-nowrap">
<div class="col border-start border-end-1">
1
</div>
<!-- data 1 -->
<div class="col border-start border-end">
<div class="row flex-nowrap">
<div class="col" style="background-color:red;">A</div>
</div>
</div>
<!-- data 2 -->
<div class="col border-start border-end">
<div class="row flex-nowrap">
<div class="col" style="background-color:blue;">A</div>
<div class="col" style="background-color:yellow;">B</div>
<div class="col" style="background-color:green;">C</div>
</div>
</div>
<!-- data 3 -->
<div class="col border-start border-end">#</div>
<!-- data 4 -->
<div class="col border-start border-end">#</div>
<!-- data 5 -->
<div class="col border-start border-end">#</div>
<!-- data 6 -->
<div class="col border-start border-end">#</div>
<!-- data 7 -->
<div class="col border-start border-end">#</div>
</div>
<!-- data -->
<div class="row flex-nowrap">
<div class="col border-start border-end-1">
2
</div>
<!-- data 1 -->
<div class="col border-start border-end">
<div class="row flex-nowrap">
<div class="col" style="background-color:red;">A</div>
</div>
</div>
<!-- data 2 -->
<div class="col border-start border-end">
<div class="row flex-nowrap">
<div class="col" style="background-color:blue;">A</div>
<div class="col" style="background-color:yellow;">B</div>
<div class="col" style="background-color:green;">C</div>
</div>
</div>
<!-- data 3 -->
<div class="col border-start border-end">#</div>
<!-- data 4 -->
<div class="col border-start border-end">#</div>
<!-- data 5 -->
<div class="col border-start border-end">#</div>
<!-- data 6 -->
<div class="col border-start border-end">#</div>
<!-- data 7 -->
<div class="col border-start border-end">#</div>
</div>
<!-- data -->
<div class="row flex-nowrap">
<div class="col border-start border-end-1">
3
</div>
<!-- data 1 -->
<div class="col border-start border-end">
<div class="row flex-nowrap">
</div>
</div>
<!-- data 2 -->
<div class="col border-start border-end">
<div class="row flex-nowrap">
<div class="col" style="background-color:blue;">A</div>
<div class="col" style="background-color:yellow;">B</div>
<div class="col" style="background-color:green;">C</div>
</div>
</div>
<!-- data 3 -->
<div class="col border-start border-end">#</div>
<!-- data 4 -->
<div class="col border-start border-end">#</div>
<!-- data 5 -->
<div class="col border-start border-end">#</div>
<!-- data 6 -->
<div class="col border-start border-end">#</div>
<!-- data 7 -->
<div class="col border-start border-end">#</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment