CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Aman WD
Aman WD

Reputation: 81

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

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>

Upvotes: 7

Views: 7855

Answers (4)

Vishal
Vishal

Reputation: 178

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>

Upvotes: 1

Mukesh Patel
Mukesh Patel

Reputation: 147

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.

Upvotes: 1

Master.Deep
Master.Deep

Reputation: 812

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/

Upvotes: 5

Sumit Kumar
Sumit Kumar

Reputation: 493

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

Upvotes: 1

Related Questions