Aligning objects on the screen using bootstrap

Asked

Viewed 437 times

2

I have this code that I found on the internet that works as a Dashboard, but I can’t align the objects the way I’d like

The code:

<div class="row">
    <div class="col-xs-12 col-md-5">
        <div class="box box-default">
            <div class="box-header">
                <h3 class="box-title">iCheck - Checkbox &amp; Radio Inputs</h3>
            </div>
            <div class="box-body">
                <div class="form-group">
                    <div>
                        <input type="checkbox" class="form-control" checked="checked"> Checkbox
                    </div>
                    <div>
                        <input type="checkbox" class="form-control"> Checkbox
                    </div>
                    <div>
                        <input type="checkbox" class="form-control" disabled="disabled"> Disabled Checkbox
                    </div>
                </div>
                <div class="form-group">
                    <div>
                        <input type="radio" class="form-control" checked="checked"> Radio Button
                    </div>
                    <div>
                        <input type="radio" class="form-control"> Radio Button
                    </div>
                    <div>
                        <input type="radio" class="form-control" disabled="disabled"> Disabled Radio Button
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-7">
        <div class="box box-default">
            <div class="box-header with-border">
                <h3 class="box-title">Select2</h3>

                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
                </div>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Minimal</label>
                            <select class="form-control" style="width: 100%;">
                                <optgroup label="Alaskan/Hawaiian Time Zone">
                                    <option value="AK">Alaska</option>
                                    <option value="HI">Hawaii</option>
                                </optgroup>
                                <optgroup label="Pacific Time Zone">
                                    <option value="CA">California</option>
                                    <option value="NV">Nevada</option>
                                    <option value="OR">Oregon</option>
                                    <option value="WA">Washington</option>
                                </optgroup>
                                <optgroup label="Mountain Time Zone">
                                    <option value="AZ">Arizona</option>
                                    <option value="CO">Colorado</option>
                                    <option value="ID">Idaho</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="UT">Utah</option>
                                    <option value="WY">Wyoming</option>
                                </optgroup>
                                <optgroup label="Central Time Zone">
                                    <option value="AL">Alabama</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TX">Texas</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="WI">Wisconsin</option>
                                </optgroup>
                                <optgroup label="Eastern Time Zone">
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="IN">Indiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="OH">Ohio</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WV">West Virginia</option>
                                </optgroup>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Disabled</label>
                            <select class="form-control" disabled="disabled" style="width: 100%;">
                                <option selected="selected">Alabama</option>
                                <option>Alaska</option>
                                <option>California</option>
                                <option>Delaware</option>
                                <option>Tennessee</option>
                                <option>Texas</option>
                                <option>Washington</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Multiple</label>
                            <select class="form-control" multiple="multiple" data-placeholder="Select a State" style="width: 100%;">
                                <option>Alabama</option>
                                <option>Alaska</option>
                                <option>California</option>
                                <option>Delaware</option>
                                <option>Tennessee</option>
                                <option>Texas</option>
                                <option>Washington</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Disabled Result</label>
                            <select class="form-control" style="width: 50%;">
                                <option selected="selected">Alabama</option>
                                <option>Alaska</option>
                                <option disabled="disabled">California (disabled)</option>
                                <option>Delaware</option>
                                <option>Tennessee</option>
                                <option>Texas</option>
                                <option>Washington</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row" align="right">
    <div class="col-xs-5 col-md-3" align="right">
       <!--<div class="box box-default"> --> 
       <!--  <div class="box-header"> -->     
               
          <!-- </div> -->  
            <div class="form-group"  >
                <label class="col-sm-2 control-label">Data</label>
                <div class="col-sm-10">
                    <div class="input-group date">
                        <input type="text" class="form-control" id="exemplo">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                    </div>
                </div>
           </div>
        <!--  </div>-->     
            <div class="col-xs-5 col-md-3 " align="right">
                <div class="box box-pane-righ" align="right" >
                    <div class="box-header box-pane-right" align="right">
                        <h3 class="box-title">Input masks</h3>
                    </div>
                    <div class="box-body"align="right">
                        <div class="form-group" align="right">
                            <label>Date masks:</label>

                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask=""align="right">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <input type="text" class="form-control" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>US phone mask:</label>

                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <input type="text" class="form-control" data-inputmask="&quot;mask&quot;: &quot;(999) 999-9999&quot;" data-mask="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Intl US phone mask:</label>

                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-phone"></i>
                                </div>
                                <input type="text" class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>IP mask:</label>

                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="fa fa-laptop"></i>
                                </div>
                                <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Screen

For example, if I want to align the "input Mask" box on the right with the "select 2" screen or maybe throw it down the screen "date"

html css twitter-bootstrap bootstrap-3

  • You are in the Portuguese So

  • Janson write in English. Vc is using Bootstrap 3 or 4?

  • Bootstrap v3.3.7. So, I have these menus inside a Dash board, but I need to learn how to align the objects. As I’m starting now with front end, my knowledge is very limited

  • 1

    Janson, the community you are asking the question to is Brazilian, I suggest you translate the question or if you prefer to publish it in http://stackoverflow.com, but this thread has grammatical errors and possibly they will suggest the same.

  • I didn’t even see that it was community BR at the time I posted, but I already put the text in Portuguese.

1 answer

2

This is because of the grid. To move the columns to the right, respecting the grid, use col-Md-offset-* (or in the media query you prefer).

Run the example I did and take a look at the HTML to see how I used the grid offset.

$(document).ready(function() {
  $('#example .col-xs-1').each(function(i) {
    var rand = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    $(this).css('background', rand);
  });
});
#example > div {
  height: 30px;
}

.box {
  height: 100px;
  margin: 0 auto;
}

.box-1 {
  background-color: blue;
}

.box-2 {
  background-color: yellow;
}

.box-3 {
  background-color: red;
}

.box-4 {
  background-color: purple;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row" id="example">
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
</div>
  <div class="row">
  <div class="col-xs-5">
    <div class="box box-1">
      Bloco 1
    </div>
  </div>
  <div class="col-xs-5">
    <div class="box box-2">
      Bloco 2
    </div>
  </div>
</div>
  <div class="row">
  <div class="col-xs-3">
    <div class="box box-3">
      Bloco 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-offset-4">
    <div class="box box-4">
      Bloco 4
    </div>
  </div>
</div>
 </div>

Browser other questions tagged html css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.