In the initial stages of my code, I am focusing on establishing the positioning for various elements. Although I have managed to structure most of it, the final two sections are still pending and I have encountered a problem.
Utilizing bootstrap has ensured that everything is responsive; however, when the browser window is reduced in size, the buttons start stacking. Contrary to this, if you look at 'google.com', instead of stacking, the page gets cut off which gives a more visually appealing appearance (while still adjusting to the window size).
How can I amend my code to achieve the same effect or at least prevent it from looking chaotic when the browser window is small? Any suggestions on this matter would be greatly appreciated. As design is not my forte, perhaps having the page cut off after a certain point may not be the ideal solution.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" rel="stylesheet">
<title>Noted!</title>
</head>
<body>
<section class='container-fluid'>
<div class='row-fluid'>
<div class='col-md-4'>
<h1>logo</h1>
</div>
<div class='col-md-4 col-md-offset-4'>
<button>login</button>
</div>
</div>
</section>
<section class='container'>
<div class='text-center'>
<h1>motto here</h1>
</div>
<div class='row' class='text-center'>
<div class='col-md-3 col-md-offset-3'>
<button>facebook button</button>
</div>
<div class='col-md-3'>
<button>twitter button</button>
</div>
</div>
</section>
<section class='container'>
<h1>about us and icons</h1>
</section>
<section class='container-fluid'>
<h1>footer mate</h1>
</section>
</body>
<!-- don't forget to link the angular file -->
</html>