1

I am having problem in designing the footer same as in the image. I am new in css and bootstrap thats why don't have much knowledge. I want to design the given footer only for mobile view. For desktop the image will be different.I am confused with the horizontal partition because it will have vertical partition in desktop

enter image description here

My code for desktop view is:

.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>
vanburen
  • 21,502
  • 7
  • 28
  • 41
Swarnima Gupta
  • 59
  • 8
  • Possible duplicate of [Twitter bootstrap hide element on small devices](http://stackoverflow.com/questions/19659726/twitter-bootstrap-hide-element-on-small-devices) – benomatis Feb 09 '17 at 23:28

2 Answers2

0

You may want to practice using % when inputting css.
e.g.

border-right: 1%
style="margin-top: 1.3%; <br/>

As using px and em may usually damage your css from different sizes of screen.

WTFZane
  • 592
  • 1
  • 4
  • 25
0

Use a CSS border. In mobile, make it a top or bottom border (so it is horizontal), and on desktop make it a left or right border (so it is vertical) with a @media query.

Michael Coker
  • 52,626
  • 5
  • 64
  • 64