Menu
I'm new to bootstrap and CSS in general. I have some html which looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Site</title>
<link rel="stylesheet" href="/css/bootstrap-theme.css">
<link rel="stylesheet" href="/css/font-awesome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1"><span id="cool-title">My Site</span></div>
<div class="col-md-1">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"></i></button>
</div>
</div>
<div id="main">
</div>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
</body>
</html>
I want all of those col- divs to be inlined, but they are all showing up on their own rows:
What's going on here?
649
You are using /css/bootstrap-theme.css. Use /css/bootstrap.css or /css/bootstrap.min.css instead. bootstrap-theme.css doesn't have "col- " properties.
Also, instead of using just one class="col-md-1" (for medium sized viewport/screen) you might want to use something like class="col-xs-12 col-sm-6 col-md-3 col-lg-3" that makes your columns responsive to different screens. ('xs' for extra small screen, 'lg' for large screen etc. Play around with these numbers. Bootstrap uses a 12 columns grid layout, so use factors of 12 as the numbers.)
112
If you are viewing it with small screen width then use following way:
<div class="row">
<div class="col-md-1 col-sm-1"><span class="fa fa-caret-down"></span></div>
<div class="col-md-1 col-sm-2 col-xs-2"><span id="cool-title">My Site</span></div>
<div class="col-md-1 col-sm-3 col-xs-4">
<input type="text" placeholder="Search" class="search-bar">
</div>
<div class="col-md-1 col-sm-1 col-xs-1">
<button class="btn btn-default"><i class="fa fa-search col-md-1"> button</i></button>
</div>
</div>
Experiment with changing col-md-#(column number) or others to achieve your desired result.
Liveweave : http://liveweave.com/9MGL33
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
