I have a small problem to adjust columns, according to bootstrap and its grid system is used col, col- md, col-ml, col-sm, col-lg and its other variants.
It turns out that in terms of the design of the next image
As I understand the grid system has up to 12 columns. My idea is that the big top box is smaller (I applied col-md-8) and for the contacts (id1 and id2) I applied col-md-4 but the strange thing is that the big top box moves to the left and contacts do not go up.
I add code below:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
<title>Chat con nodejs + socket.io</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<style>
h2 {
margin-top: 20px;
}
.input-group-addon{
background-color: rgb(2, 117, 216);
color: #efefef;
}
#messages {
padding: none;
}
.chat-window {
height: 500px;
border: 1px solid #cccccc;
margin-bottom: 10px;
padding: 1rem;
overflow-y: scroll;
}
.msg {
margin-bottom: 1rem;
}
.id{
font-weight: bolder;
}
#feedback p{
color: #aaa;
padding: 1px 0px;
margin: 0 20px;
}
#output strong{
color: #575ed8;
}
#chat-window1{
height: 0px;
background: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2>Websocket & Socket.io Chat</h2>
</div>
<div class="col-md-12">
<div class="chat-window">
<div id="message">
</div>
<div id="chat-window1">
<div id="output"></div>
<div id="feedback"></div>
</div>
</div>
<div id="controls">
<div class="row">
<div class="col-md-4">
<div class="list-group" id="channel" name="channel" role="tablist">
<a class="list-group-item list-group-item-action" name="cod" value="id1" data-toggle="list" href="#list-home">id1</a>
<a class="list-group-item list-group-item-action" name="cod" value="id2" data-toggle="list" href="#list-home">id2</a>
</div>
</div></div>
<div class="col-md-12">
<div class="input-group enter-chat-message">
<input id="handle" type="hidden" value="usuario1" placeholder="Handle" />
<input type="text" id="messages" name="name" class="form-control" placeholder="Chat Message...">
<button id="btn" class="input-group-addon submit-chat-message" type="submit" name="submit" value="Enviar">Send</button>
</div></div></div></div>
</div></div></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
The goal is to leave something like the image below:
Thanks in advance, any help is welcome.