2022-05-12 21:58:18 -07:00
< div class = "container" >
< div class = "row" >
< section class = "col-3" >
< h5 class = "text-warning ml-3" > Sort< / h5 >
2022-05-12 22:03:52 -07:00
< select class = "custom-select mb-3" style = "width: 100%;" >
< option selected > Name< / option >
< option > Price: Low to High< / option >
< option > Price: High to Low< / option >
2022-05-12 21:58:18 -07:00
< / select >
< h5 class = "text-warning ml-3" > Brands< / h5 >
< ul class = "list-group my-3" >
< li class = "list-group-item active" aria-current = "true" > An active item< / li >
< li class = "list-group-item" > A second item< / li >
< li class = "list-group-item" > A third item< / li >
< li class = "list-group-item" > A fourth item< / li >
< li class = "list-group-item" > And a fifth one< / li >
< / ul >
< h5 class = "text-warning ml-3" > Type< / h5 >
< ul class = "list-group my-3" >
< li class = "list-group-item active" aria-current = "true" > An active item< / li >
< li class = "list-group-item" > A second item< / li >
< li class = "list-group-item" > A third item< / li >
< li class = "list-group-item" > A fourth item< / li >
< li class = "list-group-item" > And a fifth one< / li >
< / ul >
< / section >
< section class = "col-9" >
< div class = "d-flex justify-content-between align-items-center pb-2" >
< header >
< span > Showing < strong > 10< / strong > of < strong > 18< / strong > Results< / span >
< / header >
< div class = "row g-2 align-items-center" >
< div class = "col-sm" >
< input style = "width:300px" placeholder = "Search" type = "text" class = "form-control" >
< / div >
< div class = "col-sm" >
< button class = "btn btn-outline-primary my-3 me-2" > Search< / button >
< button class = "btn btn-outline-success my-3" > Reset< / button >
< / div >
< / div >
< / div >
< div class = "row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< div class = "col" >
< div class = "card shadow-sm" >
< svg class = "bd-placeholder-img card-img-top" width = "100%" height = "225" xmlns = "http://www.w3.org/2000/svg" role = "img" aria-label = "Placeholder: Thumbnail" preserveAspectRatio = "xMidYMid slice" focusable = "false" > < title > Placeholder< / title > < rect width = "100%" height = "100%" fill = "#55595c" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#43484b;" > < / rect > < text x = "50%" y = "50%" fill = "#eceeef" dy = ".3em" data-darkreader-inline-fill = "" style = "--darkreader-inline-fill:#dddad6;" > Thumbnail< / text > < / svg >
< div class = "card-body" >
< p class = "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.< / p >
< div class = "d-flex justify-content-between align-items-center" >
< div class = "btn-group" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > View< / button >
< button type = "button" class = "btn btn-sm btn-outline-secondary" > Edit< / button >
< / div >
< small class = "text-muted" > 9 mins< / small >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< / div >
< / div >
