Twitter Bootstrap Question posted in

How to put vertical lines left and right of logo – Twitter bootstrap

I would like to put vertical lines left and right of this Logo text, but both lines need to touch the bottom border, this is what I have now: Here’s a codepen:

http://codepen.io/anon/pen/ZBMXbw

.header-container {
  /*padding: 8px;*/
  border-bottom: 2px solid lightgrey;
  margin-top: 20px;
}
.logo {
  font-size: 12px;
  font-weight: bold;
  position: relative;
  bottom: -10px;
}
.col-md-1 {
  border-left: 1px solid grey;
}
h4 {
  font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="header-container col-md-8 col-md-offset-2">
      <div class="col-md-1 logo">Logo here</div>
      <div class="col-md-11">
        <h4>lorem ipsum lorem lorem</h4>
      </div>
    </div>
  </div>
</div>
Tags:

4

Answers


  1. 0

    Use pseudo-elements on .logo. Like this:

    .logo:before {
  content: '';
  position: absolute;
  left: 0; /* adjust as you need */
  top: 0;
  width: 1px;
  height: 30px;
  background-color:grey;
}

.logo:after {
  content: '';
  position: absolute;
  right: 0; /* adjust as you need */
  top: 0;
  width: 1px;
  height: 30px;
  background-color:grey;
}

    Demo

    UPDATED: Thanks to comment by besciualex

    Login or Signup to reply.
  2. 0

    it seems to me that what you need is to use the pseudo selectors ::before and ::after. Try the following:

    .logo::before {
   content: '';
   display:inline-block;
   width: 1px;
   height: [put the desired height here];
   margin: [adjust margins];
}
.logo::after{
   content: '';
   display:inline-block;
   width: 1px;
   height: [put the desired height here];
   margin: [adjust margins];
}

    Let me know if this works.

    Login or Signup to reply.
  3. 0

    Updated copen.

    You can use line-height :

    .logo {
    font-size: 12px;
    font-weight: bold;
    position: relative;
    bottom: -10px;
    line-height: 30px;
}

.col-md-1 {
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}
    Login or Signup to reply.
  4. 0

    You can use CSS Flexbox for this. Make your .header-container a flex container. Have a look at the snippet below:

    .header-container {
    /*padding: 8px;*/
    border-bottom: 2px solid lightgrey;
    margin-top: 20px;
  display: flex;
  align-items: center;
}

.logo {
    padding: 0 10px;
    margin-right: 10px;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    border-right: 1px solid;
    border-left: 1px solid;
    align-self: stretch;
    display: flex;
    align-items: center;
}

h4 {
    font-weight: bold;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="header-container col-md-8 col-md-offset-2">
            <div class="item logo">Logo</div>
            <div class="item">
                <h4>
                    lorem ipsum lorem lorem
                </h4>
            </div>
        </div>
    </div>
</div>

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search