Twitter Bootstrap Question posted in

Why is this Bootstrap row covering more width than the screen width?-Twitter bootstrap

I am trying to insert feedback form in my website. I have an email field and text message field, with a send button. All of this is inside a Bootstrap row. But this row is taking more width than the screen width. I want the row to fit to 100% of the screen width. Can anybody help me out? Thanks in advance!

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <div class="row" id="getintouchrow" style="background-color: #1C2833;border: none;">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <center>
        <h1 style="margin-top: 100px;font-family: 'Audiowide', cursive;color: #B2BABB">Sample Text</h1>
        <h5 style="font-family: 'Abel', sans-serif;color: #B2BABB">Sample Text<br></h5>
      </center>
      <form style="background-color: transparent">

        <div class="form-group">

          <input type="email" class="form-control" id="InputEmail1" placeholder="Enter email" style="background-color: rgba(0,0,0,0);border-top:none;border-radius: none;border-left: none;border-right: none;">> </div>
        <div class="form-group">

          <textarea class="form-control" id="Textarea" rows="3" placeholder="Type here" style="background-color: rgba(0,0,0,0);border-top:none;border-radius: none;border-left: none;border-right: none;"></textarea><br><br>
        </div>
        <center>
          <center><a href="#" class=" contact-mission btn btn-outline-dark" style="font-size: 22px;width: 300px;outline-width: 50px;height: 50px;font-family: 'Pacifico', cursive;margin-bottom: 70px;">Send Message</a></center>
        </center>
      </form>

      <div class="col-md-3"></div>
      <div class="py-5 text-white" style="border-top-color: #1C2833">
        <div class="container">
          <div class="row">

            <div class="col-4 col-md-1 align-self-center">
              <a href="https://www.facebook.com" target="_blank">
                <i class="fa fa-fw fa-facebook fa-3x text-white"></i>
              </a>
            </div>
            <div class="col-4 col-md-1 align-self-center">
              <a href="https://twitter.com" target="_blank">
                <i class="fa fa-fw fa-twitter fa-3x text-white"></i>
              </a>
            </div>
            <div class="col-4 col-md-1 align-self-center">
              <a href="https://www.instagram.com" target="_blank">
                <i class="fa fa-fw fa-instagram text-white fa-3x"></i>
              </a>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 mt-3 text-center">
              <p>© Copyright 2018 - All rights reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
Tags:

4

Answers


  1. 0

    Hi if row is expanding more than the width please make surerow{border:0px;margin-right:0;margin-left:0;max-width:100%; }

    Login or Signup to reply.
  2. 0

    Since you are working with Bootstrap. The structure of bootstrap says all the content should be wrap in class container. Which is followed by row which have columns inside. Since row styling are:

    .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

    Where it is giving margin left and right -15px, to cover padding which will come from parent container class. So please wrap your row with container to get desired result
    Useful Link for more understanding of grid:
    https://getbootstrap.com/docs/4.0/examples/grid/

    Login or Signup to reply.
  3. 0

    see because in .row there is negative margin set for left and right both by 15px. that’s why its taking width more than screen size, so you can user in proper structure allowed by bootstrap convention.

    container > row > col

    it will take whole screen size.

    Login or Signup to reply.
  4. 0

    Use “Container-fluid” class instead of row.

    Please Refer Below Fiddle

    Fiddle

    <html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid" id="getintouchrow" style="background-color: #1C2833;border: none;">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <center>
        <h1 style="margin-top: 100px;font-family: 'Audiowide', cursive;color: #B2BABB">Sample Text</h1>
        <h5 style="font-family: 'Abel', sans-serif;color: #B2BABB">Sample Text<br></h5>
      </center>
      <form style="background-color: transparent">

        <div class="form-group">

          <input type="email" class="form-control" id="InputEmail1" placeholder="Enter email" style="background-color: rgba(0,0,0,0);border-top:none;border-radius: none;border-left: none;border-right: none;">> </div>
        <div class="form-group">

          <textarea class="form-control" id="Textarea" rows="3" placeholder="Type here" style="background-color: rgba(0,0,0,0);border-top:none;border-radius: none;border-left: none;border-right: none;"></textarea><br><br>
        </div>
        <center>
          <center><a href="#" class=" contact-mission btn btn-outline-dark" style="font-size: 22px;width: 300px;outline-width: 50px;height: 50px;font-family: 'Pacifico', cursive;margin-bottom: 70px;">Send Message</a></center>
        </center>
      </form>

      <div class="col-md-3"></div>
      <div class="py-5 text-white" style="border-top-color: #1C2833">
        <div class="container">
          <div class="row">

            <div class="col-4 col-md-1 align-self-center">
              <a href="https://www.facebook.com" target="_blank">
                <i class="fa fa-fw fa-facebook fa-3x text-white"></i>
              </a>
            </div>
            <div class="col-4 col-md-1 align-self-center">
              <a href="https://twitter.com" target="_blank">
                <i class="fa fa-fw fa-twitter fa-3x text-white"></i>
              </a>
            </div>
            <div class="col-4 col-md-1 align-self-center">
              <a href="https://www.instagram.com" target="_blank">
                <i class="fa fa-fw fa-instagram text-white fa-3x"></i>
              </a>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 mt-3 text-center">
              <p>© Copyright 2018 - All rights reserved.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search