Need help creating a reponsive template - html

I am trying to make a responsive grid but I was very unsuccessful.
I am new to bootstrap and I am not very good in Front-end.
I tried some codes but this one is the closest one to my needs.
<div><p>MY TEXT HERE -------------------------</p></div>
<div>
<div id="containerTest" class="container-fluid" style="margin-left: 0px;">
<div class="row">
<div class="col-sm-3" style="background-color:red;" >AAAA</div>
<div class="col-sm-6" style="background-color:lavenderblush;">BBBBB</div>
<div class="col-sm-3" style="background-color:lavender;">
<button class="button button2">OK</button></div>
</div>
</div>


With this Bootstrap 4 code, the layout looks like your drawing.
<div class="container">
<div class="row">
<div class="col-12">
<p>My text here</p>
</div>
</div>
<div class="row">
<div class="col-3 col-md-2 pt-2 pr-0">
<label>Input label</label>
</div>
<div class="col-6 col-md-2 pr-0">
<input type="text" class="form-control w-100">
</div>
<div class="col-3 d-md-none">
<button type="button" class="btn btn-success">Save</button>
</div>
<div class="col-12 col-md-3">
<input type="text" class="form-control w-100">
</div>
<div class="col-12 col-md-3 d-none d-md-flex pl-0">
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
<div class="row">
<div class="col-12">
<p>Other elements here</p>
</div>
</div>
</div>


That should do it.
<div class="container">
<div class="row">
<div class="col-sm-12">My text here ------------------</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-4">Input Label</div>
<div class="col-md-3 col-sm-4">Input</div>
<div class="col-md-3 hidden-sm">Input</div>
<div class="col-md-3">Save button</div>
</div>
<div class="row visible-sm">
<div class="col-sm-12">
<div class="col-md-3">Input</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Text Area here</div>
</div>
</div>

Related

Center columns across table row

I'm trying to center my columns across the page. I'm instead stacking rows on top of each other.
Here is my code:
<tr>
<td colspan="2" style="padding-left: 25px; padding-right: 25px;">
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-" style="font-weight:bold;">
Total Open
</div>
</div>
<div class="row">
<div class="col" id="TotalOpen">
1
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
Total Unassigned
</div>
</div>
<div class="row">
<div class="col" id="TotalUnassigned">
2
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
LSA Unassigned
</div>
</div>
<div class="row">
<div class="col" id="LSAUnassigned">
3
</div>
<button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
LS Unassigned
</div>
</div>
<div class="row">
<div class="col" id="LSUnassigned">
4
</div>
<button id="LSUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col-lg-12" style="font-weight:bold;">
SLO Unassigned
</div>
</div>
<div class="row">
<div class="col" id="SLOUnassigned">
5
</div>
<button id="SLOUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
<div class="col">
<div class="row">
<div class="col" style="font-weight:bold;">
ATTY Unassigned
</div>
</div>
<div class="row">
<div class="col" id="ATTYUnassigned">
6
</div>
<button id="ATTYUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>
</div>
</div>
</td>
</tr>
Which looks like this:
stacked columns
I'd like it to look like this:
goal
I'm using .cshtml and Bootstrap to try and accomplish this.
I'm not very good at HTML and I don't understand why columns are stacking vertically instead of horizontally.
I apologize for my terrible MS Paint skills.

If you using a bootstrap 4, use a structure row like this.
If you added a more <div> code will got block element.
So let's try like this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
Total Open
</div>
<div id="TotalOpen">
1
</div>
</div>
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
Total Unassigned
</div>
<div id="TotalUnassigned">
2
</div>
</div>
<div class="col-md-2 col-sm-2">
<div style="font-weight:bold;">
LSA Unassigned
</div>
<div id="LSAUnassigned">
3
</div>
<button id="LSAUnassignedButton" type="button" class="btn btn-primary">TAKE</button>
</div>
</div>

Responsive list of divs in bootstraps

I have created this table with divs. This is how it is displayed on the screen:
<div class="row my-2">
<div class="col-lg-2">
<strong>Source</strong>
</div>
<div class="col-lg-2">
<strong>Target Language</strong>
</div>
<div class="col-lg-2">
<strong> Price per word</strong>
</div>
<div class="col-lg-2">
<strong>Total words</strong>
</div>
<div class="col-lg-2">
<strong>Total per language</strong>
</div>
<div class="col-lg-2">
<strong>Total Price</strong>
</div>
</div>
And this for entries in tables:
<div class="row my-2">
<div class="col-lg-2 mx-auto my-auto">
script.txt (English)
</div>
<div class="col-lg-2 mx-auto">
<div class="row mx-auto">
German
</div>
<div class="row mx-auto">
Chineese
</div>
<div class="row mx-auto">
French
</div>
</div>
<div class="col-lg-2">
<div class="row mx-auto">
$0.04
</div>
<div class="row mx-auto">
$0.05
</div>
<div class="row mx-auto">
$0.04
</div>
</div>
<div class="col-lg-2 mx-auto my-auto">
× 1245
</div>
</div>
I am getting this on large screen, but not on mobile view.
What can be done to get this same table on mobile view.

Issue with bootstrap columns while nesting inside columns

The layout of page is miss-placed when columns are nested inside another column
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-6"></div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-6"></div>
</div>
</div>
An advanced way:
<div class="container bg-primary" style="width: 800px; height: 100px; ">
<div class="row ml-1 h-100">
<div class="col-10 ml-0 my-auto h-75 container bg-danger">
<div class="row ml-1 h-100">
<div class="col-8 ml-0 my-auto h-75 container bg-warning">
<div class="row ml-1 h-100">
<div class="col-6 ml-0 my-auto h-75 container bg-success">
<div class="row ml-1 h-100">
<div class="col-4 ml-0 my-auto h-75 container bg-dark">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Merge columns in Bootstrap vertically

i simply want to join two columns in Bootstrap vertically. Here is the code:
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
Here is an illustration of what i mean:

You can do it this way
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
1
</div>
<div class="col-md-12">
2
</div>
</div>
</div>
<div class="col-md-6">
3
</div>
</div>
</div>

Maybe something like this?
<div class="row">
<div class="col-6">
<div class="row " >
1.
</div>
<div class="row ">
2.
</div>
</div>
<div class="col-6 ">
3.
</div>
</div>

Bootstrap tag "col-md-8" not centenring

The problem is that the 3rd row and the 4th don't center!
<!--|--------------------------------------------------------------------------------------------|-->
<div class="container">
<div class="row">
<div class="col-md-12 imagemFundo">
<!--|---------------------------------------ROWS-------------------------------------------------|-->
<div id="1" class="row rowPrincipal ">
<div class="container" >
<div class="col-md-2">
</div>
<div class="col-md-8 colPrincipal2 borderRow">
<!-----------------------------PANEL-------------------------------------|-->
<div class="panel panel-default panelTop">
<div class="panel-heading">Primeiro Título</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Segundo Título</h1>
</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<!-----------------------------PANELEND----------------------------------|-->
</div>
<div class="col-md-2">
</div>
</div>
<!--SEGUNDA ROW-----------------------------------------------------------------|-->
<div id="2" class="1 row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">SEGUNDA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--TERCEIRA ROW-----------------------------------------------------------------|-->
The problem starts here!!!!!I have tried every single thing and nothing works. I got a hint that may be divs not closed well but i can't find any error :/ I'm a beginner so maybe that's the problem.
<div id="3" class=" row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">TERCEIRA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--QUARTA ROW----------------------------------------------------------------|-->
<div id="4" class="row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--FINAL ROW-----------------------------------------------------------------|-->
</div>
<!--|---------------------------------------ROWS END------------------------------------------|-->
</div>
</div>
</div>
Please help me!! I really can't figure it out by myself...

<div id="4" class="row rowSecundario ">
<div class="col-md-8 offset-2 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
</div>