I've been working on my Angular application and I'm using a Bootstrap card to display some information.
Unfortunately, I can't seem to get the design to look how I want it to, even after trying multiple approaches.
The component.html code is:
<div class="bs-example">
<div class="card" id="dd" style="max-width: 800px;">
<div class="row no-gutters">
<div class="col-sm-3" >
heading-1
</div>
<div class="col-sm-3">
<div>heading-1</div>
<div class="col-sm-3">
<div>heading-3</div>
<div class="card-body">
<h5>info-1</h5>
<h5>info-1</h5>
</div>
</div>
</div>
</div>
The component.css code is:
body{
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
color:white;
}
.bs-example{
margin: 20px;
}
#dd{
background-color: #2d3436;
background-image: linear-gradient(315deg, #2d3436 0%, #000000 74%);
color:white;
font-weight: bold;
border-bottom: 1px solid grey;
}
I'm aiming to display four headings (heading-1, heading-2..) in a single row, with corresponding info and borders below each one. Then in the next row, more info under each heading should be displayed.
If anyone could offer advice or assistance with this Bootstrap layout, as I'm new to using it, that would be greatly appreciated.