How to align items next to each other?

Asked

Viewed 1,335 times

0

So,

I’m dealing with bootstrap, html and css.

I need to align two columns and have the items align to each other this way:

inserir a descrição da imagem aqui

Mine at the moment is like this: inserir a descrição da imagem aqui

Someone can help me ?

body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: whitesmoke;
    color: #383412;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    padding-top:15px;
}

/* Set width on the form input elements since they're 100% wide by default */
textarea:focus, input:focus, select:focus {
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
}

..col-sm-6 {
    font-size: 15px;
    ;
    display: inline-block;
    float: left;
    width: 100%;
}

/*Fotos*/

/*Form-w3*/
.w3-input {
    border: none;
}

.container cabec {
    background-color: #39393a;
}

.form-control:focus {
    border-color: #cccccc;
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.col-sm {
    font-size: 2em;
}

col-sm-ft {
    font-size: 2em;
    border-bottom: 1px solid black;
    float: right;
}

/*SEARCH*/
.active-purple .fa, .active-purple-2 .fa {
    color: #ce93d8;
<div class="container">
    <div class="row">
        <div class="col-sm">
            DADOS DA SS
        </div>
        <div class="col-sm">
            FOTOS
        </div>
        <div class=".col-sm-6">
            <label>NOME:</label><br />
            <input type="text" class="w3-input" style="border-bottom:1px solid black;" /><br />
            <label>E-MAIL:</label>
            <input type="email" class="w3-input" style="border-bottom:1px solid black;" /><br />
            <form class="form-inline active-purple-4">
                <i class="fas fa-search" aria-hidden="true">ATIVO:</i><br/>
                <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Search" aria-label="Search"><br/><br/>
            </form>

            <label>DATA E HORA DA ABERTURA:</label><br /><br />
            <label>DATA:</label>
            <input type="date" class="w3-input" style="border-bottom:1px solid black;" />
            <label>HORA:</label>
            <input type="time" class="w3-input" style="border-bottom:1px solid black;" /><br />
            <label>ATIVIDADE:</label><br />
            <select>
                <option>#</option>
                <option>#</option>
                <option>#</option>
                <option>#</option>
            </select><br /><br />
            <label>TIPO DE SOLICITAÇÃO DE SERVIÇO:</label><br />
            <select>
                <option>#</option>
                <option>#</option>
                <option>#</option>
                <option>#</option>
             </select><br /><br />
             <label>DESCRIÇÃO DA OS:</label><br />
             <input type="text" style="border-bottom:1px solid black;" />
        </div>
    </div>
</div>

html css

  • Put html because CSS isn’t enough to understand what you’re doing and help you with what you want to do.

  • 1

    Are you sure you’re using Bootstrap, which version of Bootstrap are you using? Because the css classes you posted there are from W3.CSS ... And not from Bootstrap

2 answers

1


Opa friend,
Let me get this straight...
You want to align the title "SS DATA" with the set of forms below ?
If yes, just you insert the Title "SS Data" under the first div of the col, getting like this:

<div class=".col-sm-6">
<h1> Dados da SS </h1>

and not creating a col for the title as you did here:

 <div class="col-sm">
                    DADOS DA SS
                </div>

To better understand the grid system that the bootstrap has, I suggest you read this article on flexbox, After reading this you will hardly have trouble positioning anything.

0

From what I understand, with the bootstrap classes themselves you can do what you want. Try something like this 

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

Note that the positioning of the elements is done using only the bootstrap grid. Just you understand how it works and apply to your need.

I recommend taking a look at these links:

https://getbootstrap.com/docs/4.3/layout/grid/

https://getbootstrap.com/docs/4.3/components/forms/

Browser other questions tagged html css

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