Struggling with creating the footer to match the image? As a beginner in CSS and Bootstrap, I admit I lack expertise in this area. My aim is to replicate the footer design for mobile view only, while having a different layout for desktop. The horizontal partition is causing confusion especially when considering the vertical division needed for desktop.
https://i.sstatic.net/zxffv.png
Here's my code snippet for the desktop view:
.btn-font {
color: white;
font-weight: bold;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row " style=" background-color:#F2F2F2;">
<div class="col-xs-12">
<div class="container ">
<div class="row footer-border " style="margin-top: 6em; border-right: 2px solid #ccc;">
<div class="col-md-4 col-xs-12 ">
<button class="btn btn-success button-def form-text btn-font" id="button" type="submit" name="go" style="margin-top: 1.2em; height: 50px; ">Get started with MMN free</button>
</div>
<div class="col-md-8 col-xs-12 ">
<p class="slider-heading " style="margin-top: 1em;">Discover what technology can do for your NGO.</p>
</div>
</div>
<div class="row" style="margin-top: 5em; ">
<div class="col-xs-12 footer1">
<p>ManageMyNGO</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 footer2">
<p>a ColoredCow product</p>
</div>
</div>
</div>
</div>
</div>