Bootstrap rows are in need of additional padding

Could someone kindly explain what's incorrect with this?

.container {
  margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div id="panel-head" class="panel-heading">

    Edit Widget

  </div>
  <div class="panel-body">
    <div class="row"><label for="title" class="col-sm-1 control-label">Title</label>
      <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
      <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
      <div class="col-sm-5"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Please select one</option>
                <option value="1">
                    2D column
                </option>
                <option value="2">
                    Multi-series 2D column
                </option>
                <option value="3">
                    Multi-series 3D column and line
                </option>
                <option value="4">
                    Gauge
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
    </div>

    <div class="row">
      <label for="link" class="col-sm-1 control-label">Link</label>
      <div class="col-sm-5">
        <input type="text" id="link" class="form-control">
      </div>
      <label for="font_size" class="col-sm-1 control-label">Font Size</label>
      <div class="col-sm-2">
        <input type="text" id="font_size" class="form-control">
      </div>
    </div>

    <div class="row">
      <label for="caption" class="col-sm-2 control-label">caption</label>
      <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
    </div>

    <div class="row">
      <label for="subcaption" class="col-sm-2 control-label">subcaption</label>
      <div class="col-sm-4">
        <input type="text" id="subcaption" class="form-control">
      </div>
    </div>

    <div class="row">
      <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
      <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
    </div>
  </div>
</div>

There seems to be no spacing between the caption, subcaption and yaxisname fields.

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

Replace row with form-group and include 

<form class="form-horizontal editform">
.

.container {
  margin-top: 10px;
}
.editform.form-horizontal .control-label {  
  text-align: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-primary">
  <div id="panel-head" class="panel-heading">

    Edit Widget

  </div>
  <div class="panel-body">
  <form class="form-horizontal editform">
    <div class="form-group"><label for="title" class="col-sm-1 control-label">Title</label>
      <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
      <label for="widget_type_id" class="col-sm-1 control-label">Widget Type</label>
      <div class="col-sm-5"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Please select one</option>
                <option value="1">
                    2D column
                </option>
                <option value="2">
                    Multi-series 2D column
                </option>
                <option value="3">
                    Multi-series 3D column and line
                </option>
                <option value="4">
                    Gauge
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
    </div>

    <div class="form-group">
      <label for="link" class="col-sm-1 control-label">Link</label>
      <div class="col-sm-5">
        <input type="text" id="link" class="form-control">
      </div>
      <label for="font_size" class="col-sm-1 control-label">Font Size</label>
      <div class="col-sm-2">
        <input type="text" id="font_size" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label for="caption" class="col-sm-2 control-label">caption</label>
      <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
    </div>

    <div class="form-group">
      <label for="subcaption" class="col-sm-2 control-label">subcaption</label>
      <div class="col-sm-4">
        <input type="text" id="subcaption" class="form-control">
      </div>
    </div>

    <div class="form-group">
      <label for="yaxisname" class="col-sm-2 control-label">yaxisname</label>
      <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
    </div>
   </form>
  </div>
</div>

Answer №2

Take a look at this:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.container {
    margin-top: 20px;
}
.form-group {
    margin-bottom: 15px;
    display: block;
    width: 90%;
}
<div class="panel panel-primary">
    <div id="panel-head" class="panel-heading">

        Customize Widget

    </div>
    <div class="panel-body">
        <div class="row">
        <div class="form-group">
        <label for="title" class="col-sm-1 control-label">Widget Title</label>
            <div class="col-sm-5"><input type="text" id="title" required="required" class="form-control"></div>
            <label for="widget_type_id" class="col-sm-2 control-label">Select Widget Type</label>
            <div class="col-sm-4"><select id="widget_type_id" class="form-control">
                <option disabled="disabled" value="">Choose an option</option>
                <option value="1">
                    2D column chart
                </option>
                <option value="2">
                    Multi-series 2D column chart
                </option>
                <option value="3">
                    Multi-series 3D column and line chart
                </option>
                <option value="4">
                    Gauge chart
                </option>
                <option value="5">
                    Datatable
                </option>
                <option value="6">
                    Counter
                </option>
            </select></div>
            </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="link" class="col-sm-2 control-label">Link</label>
          <div class="col-sm-4">
            <input type="text" id="link" class="form-control">
          </div>
            <label for="font_size" class="col-sm-2 control-label">Font Size</label>
            <div class="col-sm-4">
              <input type="text" id="font_size" class="form-control">
            </div>
            </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="caption" class="col-sm-2 control-label">Caption</label>
          <div class="col-sm-4"><input type="text" id="caption" class="form-control"></div>
        </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="subcaption" class="col-sm-2 control-label">Subcaption</label>
            <div class="col-sm-4">
              <input type="text" id="subcaption" class="form-control">
            </div>
        </div>
        </div>
        
        <div class="row">
        <div class="form-group">
          <label for="yaxisname" class="col-sm-2 control-label">Y-Axis Name</label>
          <div class="col-sm-4"><input type="text" id="yaxisname" class="form-control"></div>
        </div>
        </div>
    </div>
</div>

Answer №3

This sample HTML showcases a Form component with default Bootstrap classes.

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7618171b1336130e171b061a135815191b">[email protected]</a>">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Reference Link - http://getbootstrap.com/docs/4.0/components/forms/

Feel free to utilize the default classes, and for any customization, add your unique classes to elements and modify the styles accordingly.

Answer №4

If you want to make a change, consider using the form tag as the parent class and then applying margin-top to all labels instead of the container class. Another option is to assign a class to the label tag such as .customlabel and then utilize this class to add the desired property. For instance:

form label{
 float:left;
 with:100%;
 margin-top:10px;
}

.customlabel {
  float:left;
  with:100%;
  margin-top:10px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that the maximum price is mandatory when entering a minimum price?

Essentially, the process works like this: if a person inputs a minimum price but forgets to input a maximum price, then presses search, it will not perform the search and a message will appear next to the max price field reminding them to enter a maximum ...

javascriptphpjqueryhtmlwordpress

Disappearing PHP Session following a redirection

I'm encountering an issue with the LDAP Authentication redirection in my system. When I access Index.php, it correctly redirects me to the login page (login.php). However, after entering my credentials, it fails to redirect me back to the Index Page. ...

phphtmlcssldap

What are the steps to restrict a user from accessing a specific website?

In my Vue.js project, I've implemented a function that hides a specific menu item for users with insufficient permissions: <a :href="href" @click="navigate" v-if="hideMenuItem()"> // some code </a> hideMe ...

javascripthtmlcsstypescriptvue.js

Clicking on the parent div with a Jquery onclick event does not trigger when the child image is clicked

I'm running into an issue with a simple code containing an image within a div Oddly enough, clicking on the div itself (even with padding) triggers the function, but clicking directly on the image does not. $(".parent0").click(function() { conso ...

javascriptjqueryhtml

Incorporate SVG or HTML5 elements into a Box2D World

My SVG logo is primarily composed of elements. I am interested in animating it by placing it in a "gravity world". Although I am new to Box2D and Canvas, I have managed to convert my SVG into HTML5 canvas using canvg. Currently, I am going through the begi ...

htmlanimationsvgbox2dgravity

Keywords: <footer>, <aside> not encompassing all aspects of the HTML on the content page

Recently, I have been transitioning my codebase from .NET webform to .NET Core: In the _Layout.cshtml, elements like <hr> and <section> span the entire width (e.g. 100%) of the html page as expected. However, when I insert similar tags in the ...

html.netasp.net-coretags

The image is taking up the entire div instead of just filling the area below the header

I'm currently facing an issue with positioning an image within a container below a header. The problem lies in the fact that the image extends beyond the header's position, filling up the entire container. Below is the code snippet I'm work ...

htmlcss

What causes my unordered list to vanish when I use the CSS float: right property?

Can anyone explain why my ul element disappears when I apply the float: right property in CSS? I'm currently working on the navigation for a website project. You can view the code snippet on CodePen by following this link: https://codepen.io/maximo ...

htmlcss

What is the best way to design a dynamic gallery that showcases three columns for large screens, but switches to two columns for mobile devices?

My goal is to create an image gallery using Bootstrap, with 3 columns on large screens and 2 columns on mobile. I want to maintain the aspect ratio of each image while fixing the width so they align within the columns. I was able to achieve this on large s ...

htmlcssbootstrap-5

Why is the column width on this Tumblr page constantly flickering?

Seeking assistance with a minor issue on my Tumblr page - the content column seems to be flickering on mouseover, shifting between full width and its original programmed width. Any insight on the CSS causing this? Much appreciated! Check it out here (Dis ...

htmlcssthemestumblr

How to easily toggle multiple elements using jQuery

I'm having trouble getting this block of code to function properly: $("a.expand_all").on("click",function(){ $(this).text('Hide'); $('.answer').each(function () { $(this).slideDown(150, function () { $( ...

javascripthtmljquerytoggle

How can I align text to the left within a dropdown menu?

I'm currently working on a simple HTML and CSS dropdown menu. Although I have managed to hide and show it, I am struggling to align the text inside the dropdown to the left. Can anyone help me figure out what I'm doing wrong? Please take a look ...

htmlcss

What is the best way to prevent the background-image fade effect in Chrome?

While transitioning the background-image, I noticed a difference between Chrome and Firefox. Firefox simply replaces the image instantly as expected, while Chrome adds a fade effect to the transition. Although this may be visually appealing, it introduces ...

cssbrowser

Cascading Style Sheets can be disrupted by Scalable Vector Graphics

Currently, I am incorporating SVG Icons that I created in Illustrator into my Vue.js Webapp. I have utilized Webpack's "require" to load the icons. Rather than accessing the SVGs directly using the src attribute of the img tag, I am inserting them usi ...

csssvgwebpackvue.js

Make the Angular Modal scrollable except for when a specific div is being click dragged

I am working on an Ionic app that uses AngularJS. One issue I encountered is with a modal popup that can sometimes extend beyond the visible area. To address this, we applied overflow: hidden to its CSS class. However, there is a specific functionality i ...

cssangularjshtml

seize the cursor on chrome for windows

I'm experiencing an issue with two cursors appearing in Windows Chrome version 31.0.1650.57. The two cursors are grab and a default arrow. I have applied the following CSS: CSS div { width:200px; height:200px; background-color:maroon; ...

htmlcsscursor

Unexpected appearance of blank space to the right of my parallax design

Ever since a forced reboot, my parallax scrolling page has been experiencing issues. A strange whitespace seems to be throwing off the sections, only appearing every other section - one is fine, the next is offset, and so on. I've carefully gone thro ...

htmlcss

Tips for customizing MUI PaperProps using styled components

I am trying to customize the width of the menu using styled components in MUI. Initially, I attempted the following: const StyledMenu = styled(Menu)` && { width: 100%; } `; However, this did not have any effect. After further research, I ...

javascriptcssreactjsmaterial-ui

Guide on how to modify the CSS styling of a particular <td> element when its parent contains a specific class

.webgrid-table td, th { border: 1px solid #98bf21; padding: 3px 7px 2px; } I am facing an issue where the style defined above is being applied to all td elements. However, I want to exclude the styling for a td that is within a tr element with the ...

htmlcss

Assistance needed to make a jQuery carousel automatically rotate infinitely. Having trouble making the carousel loop continuously instead of rewinding

Currently, I am in the process of creating an auto-rotating image carousel using jQuery. My goal is to make the images rotate infinitely instead of rewinding back to the first image once the last one is reached. As a beginner in the world of jQuery, I&apos ...

javascriptjqueryhtmlcss