CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dlee23
dlee23

Reputation: 45

Splitting header into 2 columns (50% each side) on Bootstrap

I am currently building a site with Bootstrap (everything is on 1 single page).

For the home page I want it to look like this:

________________________ 
|       <Navbar>        |
|_______________________|
|   Title   |           |
|           |    Icons  |
|   Loader  |           |
|           |    Photo  |
|           |           |
|           |           |
|        <Header>       |
|___________|___________|
|        About Me       |
|           etc..       |

Whats the best way in formatting the page like this. A simple 50/50 split in the header in html/css.

I have tried floats and now i am doing the bootstrap columns

    <Header>
    <! LEFT SIDE !>         
    <div class="col-xs-6">
     <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
     <div class="loader">Loading...</div>             
    </div>

    <! RIGHT SIDE !>
    <div class="col-xs-6"> 
      <p> Join me on</p>
      <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
      <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
    </div>

However with this method, I don't really know how to style this in the CSS as they are both .col-xs-6 and it styles both sides. But is this how you would split the page or is there a better, easier method to keep it within its margins and to stay responsive?

When I used the left/right float method, the background colour kept overlapping into the 'About Me' section.

Upvotes: 0

Views: 10907

Answers (3)

vanburen
vanburen

Reputation: 21663

This is pretty straight forward as you have the basic/standard row/column structure all ready. Just add a class or ID to your columns and format away.

.navbar.navbar-custom {
  margin-bottom: 0;
  background: #fff;
}
header {
  margin-bottom: 20px;
  background: #266080;
  height: 225px;
  color: #fff;
  padding: 20px;
}
header #right-header {
  margin-top: 15px;
  text-align: center;
}
header #left-header h1 {
  font-size: 50px;
  line-height: 135%;
}
header #right-header p {
  font-size: 40px;
}
header #right-header i {
  margin: 10px;
}
@media (max-width: 767px) {
  header {
    padding: 5px;
    height: 135px;
  }
  header #left-header h1,
  header #right-header p {
    font-size: 20px;
  }
  header #right-header {
    margin-top: 15px;
  }
  header #right-header i {
    margin: 5px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Brand</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Link</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">Action</a>

            </li>
            <li><a href="#">Another action</a>

            </li>
            <li><a href="#">Something else here</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>

            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>

            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>
<Header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6" id="left-header">
        <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
        <div class="loader">Loading...</div>
      </div>
      <div class="col-xs-6" id="right-header">
        <p>Join me on</p> <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
        <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="@gmail.com"> <i class="fa fa-envelope fa-2x"></i>
        </a>

      </div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div class="alert alert-info">Yup</div>
</div>

Upvotes: 0

user1012181
user1012181

Reputation: 8726

Do something like this: http://jsfiddle.net/xf147bnp/1/

.left{ background: #abc }
.right{ background: #ccc;}
.row{background: #ccc;}
section{background: #383838; color: #fff; margin:0px; padding:10px; }
.title{background: #909090;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <section><h3>Navbar</h3></section>
    <! LEFT SIDE !>
     <div class="row">
        <div class="col-xs-6 left">
         <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
         <div class="loader">Loading...</div>             
        </div>

    <! RIGHT SIDE !>
        <div class="col-xs-6 right"> 
          <p> Join me on</p>
          <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
          <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
          <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
        </div>  
    </div>


    <! LEFT SIDE !>
     <div class="row">
        <div class="col-xs-12 title">
            <h3>About Me</h3>
        </div>  
    </div>

Upvotes: 0

APAD1
APAD1

Reputation: 13666

I would do it like this:

<div class="container">
  <header>
    <div class="row">
      <div class="left col-xs-6">
       <h1>Lets <mark class="red">code</mark><p>web developer</p></h1> 
       <div class="loader">Loading...</div>             
      </div>
      <div class="right col-xs-6"> 
        <p> Join me on</p>
        <a href="http://uk.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a>
        <a href="http://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a>
        <a href="@gmail.com"> <i class="fa fa-envelope"></i></a>
      </div>
    </div>
    <div class="clearfix"></div>
  </header>
</div>

Bootply Example

Upvotes: 1

Related Questions