csstwitter-bootstrapuser-interfacebootstrap-4bootstrap-grid
How do I make this view With bootstrap grid? or should I use list-group?
I used col-md-4 and but The "more" button doesn't remain fixed in position. I want the border to be in bottom on mobile view and on side of in tab or desktop view as shown in the pictures.
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-12">
<div class="texts">
<h4>Latest News</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
</div>
<button class="btn btn-primary">More</button>
</div>
<div class="col-sm-4 ">
<div class="texts">
<h4>Feel free to Communicate</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
</div>
<button class="btn btn-primary">More</button>
</div>
<div class="col-sm-4">
<div class="texts">
<h4>Our facilities</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
</div>
<button class="btn btn-primary">More</button>
</div>
</div>
</div>
Solution
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.borderstyle{
border-right: 1px solid #CCC;
}
@media (min-width: 992px) {
.borderstyle{
border-right :none
}
}
media
</style>
</head>
<body><div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-lg-12">
<div class="texts borderstyle">
<h4>Latest News</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
<div class="row">
<div class="col">
<button class="btn btn-primary float-right">More</button>
</div>
</div>
</div>
<hr class="d-none d-lg-block">
</div>
<div class="col-sm-4 col-lg-12">
<div class="texts borderstyle" >
<h4>Feel free to Communicate</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
<div class="row">
<div class="col">
<button class="btn btn-primary float-right">More</button>
</div>
</div>
<hr class="d-none d-lg-block">
</div>
</div>
<div class="col-sm-4 col-lg-12 borderstyle">
<div class="texts">
<h4>Our facilities</h4>
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse in metus mollis,
tincidunt metus in, vulputate est.
Donec ac aliquam augue. Vestibulum nec
purus iaculis, placerat tortor eu,
facilisis orci.
</p>
<div class="row">
<div class="col">
<button class="btn btn-primary float-right">More</button>
</div>
</div>
<hr class="d-none d-lg-block">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>you can use bootstrap class float-right to push the button to right of the div and for border you can use combination of 'hr tag' with border class visible on resposive breakpoint.
After achieving functionality you can beautify your html as you want ...:)
- Bootstrap dropdown menu navbar
- My Visual- Code-Editor is not showing the included CSS in the Live preview
- Border Gradient with Border Radius
- iOS Toggle Switch with CSS
- Create a (clickable) heart shape using CSS only
- How to make the HTML link activated by clicking on the <li>?
- How to Make Bullet Points Appear When Using display: flex?
- How to modify the fill color of an SVG image when being served as background image?
- Convert RGB color to English color name, like 'green' with Python
- Fixing Transparent Line Between Div with Clip-Path and Parent Div
- Multiple slideshows on one page makes the first one not work anymore
- How to get these two divs side-by-side?
- Expand/Resize a div with JavaScript Touch Events
- Media queries and screen orientation
- Is `cursor: not-allowed` required for accessible disabled buttons?
- Unwanted horizontal scrollbar in Next.js
- Filtering Checkboxes and Tables using Javascript
- CSS underlined text where the underline is of a lesser weight than the text?
- How to use CSS variables with Tailwind CSS
- FlatList not scrolling
- How to create CSS3 bounce effect
- Many Tailwind CSS classes doesn´t work on my Angular 12 project
- CSS selector for targeting only immediate children and not other identical descendants
- How to make an atom like animation using CSS3 animations?
- How to start Slick Slider from Left in center mode
- Bootstrap 4: Dropdown menu is going off to the right of the screen
- How to prevent a # href scroll down to a section/id of the page, but still use :target to do other things
- Extensible curly bracket with HTML and CSS
- Can you name a class in BEM with _ in it?
- How do you limit the scope in HTML?