I need to align two rows in a straight line.
Similar to the example shown in the image below:
https://i.sstatic.net/EwRat.png
After that, I want to split the Bootstrap into two columns, one with col-md-8 and the other with col-md-4.
In the col-md-8 column, I further divide it into col-md-3 containing an <hr> tag and col-md-9 containing an <h4> text along with all the content.
In the col-md-4 column, it remains as col-md-12. No need to divide <hr> in any columns here.
Then, I add text with an <hr> tag, making the alignment not straight in both columns.
My code structure is as follows:
// CSS Code Block
div.hr_tinkhuyenmai{
height: 1px;
width: 10%;
background-color: #ffa800;
}
div.title_tinkhuyenmai{
font-family: tahoma;
display: flex;
align-items: center;
justify-content: left;
}
// More CSS styles...
// HTML Code Block
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid remove_padding" style="background-color: #f8f8f8;margin-top: 20px">
<div class="row">
<div class="col-md-12">
<div class="col-md-8">
<div class="title_tinkhuyenmai">
<div class="col-md-3 hr_tinkhuyenmai"></div>
<div class="col-md-9">
<h4>TIN KHUYẾN MÃI</h4>
</div>
</div>
</div>
<div class="col-md-4">
<div class="group_title_hr col-md-12">
<div class="title_child_breakingnews text-right">TIN NỔI BẬT</div>
<div class="hr_child_breakingnews text-right"></div>
</div>
</div>
</div>
</div>
</div>