Bootstrap : Button Aren't Responsive - html

Question

I have problem with my buttons when I resize the browser to under 1120px the buttons aren't responsive.
I don't know if my code is wrong or if I missed something else(?)
This is piece of my code :
<!-- Main content -->
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</dv>
</section>
<!-- /.content -->
pic 1 : more than 1120px
pic 2 : under 1120px
ss1
ss2

Answer 1

Based on the classes, I am assuming that you are using Bootstrap. If this is the case, you could add the classes col-xs-10 col-xs-offset-1 to your buttons:
ADMIN<br>
SISWA
Here is the full snippet, fully functional:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="content">
<div class="row" style="margin-top: 100px">
<div class="col-lg-6" style="margin-top: 80px">
<h3 style="font-weight: 600; text-align: center;">About DSSDI Universitas Gadjah Mada</h3>
<h4><p style="line-height: 1.4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum sem sit amet ante mollis venenatis. Donec maximus diam nec justo sodales vehicula. Suspendisse cursus turpis in volutpat fermentum. Maecenas sapien nunc, laoreet eget risus sit amet, laoreet suscipit velit. Donec ex sem, convallis in aliquet nec, elementum ac est. Proin quis tortor neque. Nulla tincidunt id neque a malesuada. Nulla rutrum mattis urna ut tempor. Cras pellentesque pretium nisi a fermentum. In efficitur id felis ac tincidunt. Sed sed nisl viverra, posuere lectus ut, pulvinar nisl. Curabitur cursus tortor sed malesuada efficitur. Praesent at varius quam, sit amet congue neque. Vivamus vitae elit iaculis, malesuada justo a, laoreet libero. Phasellus odio metus, luctus at ipsum lacinia, ultricies rutrum ligula.</p></h4>
</div>
<div class="col-lg-6">
<div class="box box-default" style="margin-top: 80px;">
<div class="box-header with-border" style="text-align: center;">
<h3 class="box-title"><i class="fa fa-group fa-5x" style="font-size: 150px; margin-top: 50px; margin-bottom: 10px"></i></h3>
</div>
<div class="box-body">
<div class="row">
<h3 style="text-align: center; font-weight: 600; margin-bottom: 20px">Login as</h3>
ADMIN<br>
SISWA
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div> <!-- NOTE: I fixed a mis-closed div here -->
</section>
Also note that I fixed a mis-closed div.