Twitter Bootstrap Question posted in

Twitter bootstrap – Gap on right margin won't go away (Bootstrap)

I’m using Bootstrap and have a gap between the right browser margin and the grid. The grid is equal to 12 with the offset, but it still doesn’t reach the other side. I don’t want to compromise the .col sizes and make it xs. This seems to be the only solution that has worked so far. Can anyone tell help with the issue?

HTML:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">   
    <link href="http://fonts.googleapis.com/css?family=Cookie:400" rel="stylesheet" type="text/css" />
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>

    <title>Junebug Mixology</title>
</head>

<body>
<header class="bgimage">
        <img src='../bootstrap/images/junebug.png' alt="Junebug Mixology" class="img-responsive center-block" />
</header>

<div class="container-fluid">   
        <section class="hello col-md-5">
            <h1>hello!</h1> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, 
            cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit 
            commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
        </section>
        <section class="social-media col-md-4 col-md-offset-3">
                <div class="row">
                    <h3>To Stay Connected</h3>
                    <div class="row">
                        <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
                            <a href="https://www.instagram.com/neon.honey/" target="_blank"><img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram"></a>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">               
                            <a href="https://twitter.com/deephoney/" target="_blank"><img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter"></a>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
                            <a href="https://www.pinterest.com/electrodextrose/" target="_blank"><img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" /></a>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
                            <a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
                        </div>
                    </div>
                </div>
        </section>

</div>

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>

CSS:

body {
    background-color: rgb(31, 37, 45);
    color: rgb(239, 232, 239);
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    padding-top: 50px;
    }

h1 {
    color: rgb(244, 195, 197);
    font-family: 'Cookie', sans-serif;
    font-weight: 400;
    text-shadow: 2px 2px 1px rgba(192,192,192,0.1);
    text-transform: lowercase;
    font-size: 70px;
    margin-bottom: -5px;
    text-align: center;
    }

h3 {
    color: rgb(244, 195, 197);
    text-transform: uppercase;
    }

.bgimage {
    background-image: url('../images/bgimage.png');
    background-position: center center;
    background-size: cover;
    height: 450px;
    background-color: rgb(34, 39, 42);
    padding-top: 25px;
}

.row {
    margin: 7px;
    }

h4 {
    margin-top: 1px;
    text-align: left;
    font-size: 15px;
    }

.glyphicon {
    color: rgb(135, 112, 94);
    font-size: 25px;
    }

section.hello {
    text-align: center;
    }
Tags:

3

Answers


  1. 0

    You can just add the both “col-md-6”. And so the “hello” section and the “social media” will be at the same distance from the sides of the web.

    Also, let me suggest you: If you’re beginner… when you’re getting an issue, it’s good to set a boder to the “element” with that issue. That way, you’ll get more “idea” about the space, margins, paddings and kind of things.

    Login or Signup to reply.
  2. 0

    Here are two examples of how you can do this. Keep in mind if you’re going to nest columns they should keep the same relationship of row/column. In your example, you have your hello section structured without a row and the social media section with two rows. Ultimately your two base columns should be inside a row and your inner columns should be inside a row.

    And of you want the social icons to be as close the edge of the window as the hello section, you can align them to the right at above 992px and then center them @ under 992px.

    Example 1: Using columns for social icons.

    body {
  background-color: rgb(31, 37, 45);
  color: rgb(239, 232, 239);
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  padding-top: 50px;
}
h1 {
  color: rgb(244, 195, 197);
  font-family: 'Cookie', sans-serif;
  font-weight: 400;
  text-shadow: 2px 2px 1px rgba(192, 192, 192, 0.1);
  text-transform: lowercase;
  font-size: 70px;
  margin-bottom: -5px;
  text-align: center;
}
h3 {
  color: rgb(244, 195, 197);
  text-transform: uppercase;
}
.bgimage {
  background-image: url('http://placehold.it/1850x750/000/000');
  background-position: center center;
  background-size: cover;
  height: 450px;
  background-color: rgb(34, 39, 42);
  padding-top: 25px;
}
h4 {
  margin-top: 1px;
  text-align: left;
  font-size: 15px;
}
.glyphicon {
  color: rgb(135, 112, 94);
  font-size: 25px;
}
.social-media {
  text-align: right;
}
@media (max-width: 991px) {
  .social-media {
    text-align: center;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="bgimage">
  <img src='http://placehold.it/400x400/f00' alt="Junebug Mixology" class="img-responsive center-block img-circle" />
</header>
<div class="container-fluid">
  <div class="row">
    <section class="hello col-md-5 text-center">
      <h1>hello!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
    </section>
    <section class="social-media col-md-4 col-md-offset-3">

      <h3>To Stay Connected</h3>
      <div class="row">
        <div class="col-md-2 col-md-offset-4 col-xs-2 col-xs-offset-2">
          <a href="ht tps://www.instagram.com/neon.honey/" target="_blank">
            <img src="http://placehold.it/25x25/ff0" alt="Instagram">
          </a>
        </div>
        <div class="col-md-2 col-xs-2">
          <a href="https://twitter.com/deephoney/" target="_blank">
            <img src="http://placehold.it/25x25/ff0" alt="Twitter">
          </a>
        </div>
        <div class="col-md-2 col-xs-2">
          <a href="https://www.pinterest.com/electrodextrose/" target="_blank">
            <img src="http://placehold.it/25x25/ff0" alt="Pinterest" />
          </a>
        </div>
        <div class="col-md-2 col-xs-2">
          <a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
        </div>
      </div>
    </section>
  </div>
</div>

    Example 2: Positions icons without columns.

    body {
  background-color: rgb(31, 37, 45);
  color: rgb(239, 232, 239);
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  padding-top: 50px;
}
h1 {
  color: rgb(244, 195, 197);
  font-family: 'Cookie', sans-serif;
  font-weight: 400;
  text-shadow: 2px 2px 1px rgba(192, 192, 192, 0.1);
  text-transform: lowercase;
  font-size: 70px;
  margin-bottom: -5px;
  text-align: center;
}
h3 {
  color: rgb(244, 195, 197);
  text-transform: uppercase;
}
.bgimage {
  background-image: url('http://placehold.it/1850x750/000/000');
  background-position: center center;
  background-size: cover;
  height: 450px;
  background-color: rgb(34, 39, 42);
  padding-top: 25px;
}
h4 {
  margin-top: 1px;
  text-align: left;
  font-size: 15px;
}
.glyphicon {
  color: rgb(135, 112, 94);
  font-size: 25px;
}
section.hello {
  text-align: center;
}
.social-media {
  text-align: right;
  display: inline-block;
}
.social-media a {
  display: inline-block;
  text-align: center;
  margin-left: 25px;
}
@media (max-width: 991px) {
  .social-media {
    display: block;
    text-align: center;
  }
  .social-media a {
    float: none;
    margin: 0 15px;
  }
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="bgimage">
  <img src='http://placehold.it/400x400/f00' alt="Junebug Mixology" class="img-responsive center-block img-circle" />
</header>

<div class="container-fluid">
  <div class="row">
    <section class="hello col-md-5">
      <h1>hello!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
    </section>

    <section class="social-media col-md-4 col-md-offset-3">
      <h3>To Stay Connected</h3>
      <a href="https://www.instagram.com/neon.honey/" target="_blank">
        <img class="media-object" src="http://placehold.it/25x25/ff0" alt="Instagram">
      </a>
      <a href="https://twitter.com/deephoney/" target="_blank">
        <img class="media-object" src="http://placehold.it/25x25/ff0" alt="Twitter">
      </a>
      <a href="https://www.pinterest.com/electrodextrose/" target="_blank">
        <img class="media-object" src="http://placehold.it/25x25/ff0" alt="Pinterest" />
      </a>
      <a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
    </section>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    You have got few things wrong.

    1. All .col-* should be inside .row, so you have to add a parent div to your sections with class row
    2. Inside your social-media section, you have two div.row, remove the one directly inside section before h3.
    3. You have 4 divs with classes col-md-2, that would make grid of 8 cols and you need a total of 12, so add col-md-offset-2 to the first one.
    4. Similarly fix it for other col sizes, not sure what you are trying to achieve for smaller devices.
    5. At last, make heading center-aligned if you want to.

    Tip: change background color of section.social-media to help you see how big the grid is.

    Here’s a link to fiddle which I created: https://jsfiddle.net/9r30nhby/

    <header class="bgimage">
 <img src='../bootstrap/images/junebug.png' alt="Junebug Mixology" class="img-responsive center-block" />
</header>
<div class="container-fluid">

  <div class="row">

     <section class="hello col-md-5">
       <h1>hello!</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
     </section>

     <section class="social-media col-md-4 col-md-offset-3 text-center">

       <h3>To Stay Connected</h3>
       <div class="row">
         <div class="col-lg-offset-2 col-md-offset-2 col-lg-2 col-md-2 col-sm-1 col-xs-1">
           <a href="https://www.instagram.com/neon.honey/" target="_blank"><img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram"></a>
         </div>
         <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
           <a href="https://twitter.com/deephoney/" target="_blank"><img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter"></a>
         </div>
         <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
           <a href="https://www.pinterest.com/electrodextrose/" target="_blank"><img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" /></a>
         </div>
         <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
           <a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
        </div>

  </div>
</section>

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

Back To Top
Search