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.
Related
Maybe I am blind, but my Bootstrap Grid is not behaving as expected.
Shouldn't it fill the whole row? Image of possily wrong behavior
<div class="container min-vh-100 pt-5">
<h5 class="text-white mt-2">{{event?.teamA?.name}} vs. {{event?.teamB?.name}}</h5>
<div class="row py-0">
<div class="col-4 row bg-info" style="max-height: 60vh;">
<div class="col-12 row" style="max-height: 15vh;">
<div class="col-8 bg-danger row">
<div class="col-5 text-right"><h5>0</h5>Heim</div>
<div class="col-1 text-center"><h5>:</h5></div>
<div class="col-5 text-left"><h5>0</h5>Gast</div>
<div class="col-1"></div>
<div class="col-12"><p class="text-sm-center">Spielstand</p></div>
</div>
<div class="col-4 bg-success row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left"><p class="text-sm-center">Teamfouls</p></div>
</div>
</div>
</div>
</div>
You must remember that "row" class has set default properties:
margin-right: -15px;
margin-left: -15px;
And "col-anything" classes have set default properties:
padding-right: 15px;
padding-left: 15px;
That's why your idea don't work as you expected.
Bootstrap 5 (update 2021)
The Bootstrap 5 grid still uses flexbox so nesting the grid row/col still works the same way...
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>
</div>
</div>
Bootstrap 4 (original answer)
Don't use col and row together in the same div. Instead follow the Bootstrap grid rules...
"In a grid layout, content must be placed within columns and only
columns may be immediate children of rows."
<div class="row py-0">
<div class="col-4 bg-info" style="max-height: 60vh;">
<div class="row" style="max-height: 15vh;">
<div class="col-8 bg-danger">
<div class="row">
<div class="col-5 text-right">
<h5>0</h5>Heim
</div>
<div class="col-1 text-center">
<h5>:</h5>
</div>
<div class="col-5 text-left">
<h5>0</h5>Gast
</div>
<div class="col-1"></div>
<div class="col-12">
<p class="text-sm-center">Spielstand</p>
</div>
</div>
</div>
<div class="col-4 bg-success">
<div class="row">
<div class="col-6 text-right">0<br>Heim</div>
<div class="col-6 text-center">0<br>Gast</div>
<div class="col-12 text-left">
<p class="text-sm-center">Teamfouls</p>
</div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/mKFXWjc39k
I want to create this layout. I tried making 2 and 4 div duplicate and showing them on mobile and displaying on desktop and opposite.
This code is working as I expected. But I want to know that is it possible to make it without duplicating the content.
<div class="row">
<div class="col-md-2 col-12">
<img src="http://via.placeholder.com/106x106">
<div class="show-mobile">
<div>content2</div>
<div>content4</div>
</div>
</div>
<div class="col-md-8 col-12">
<div class="show-desktop">
content2
</div>
<div>
content 3
</div>
</div>
<div class="col-md-2 col-12">
<div class="show-desktop">
content 4
</div>
<div>
content 5
</div>
</div>
</div>
This might be a not a perfect solution but visually looks close enough
<div class="container">
<div class="row">
<div class="col-4 col-md-2">
<img src="http://via.placeholder.com/106x106">
</div>
<div class="col-8 col-md-8 bg-light border">
2
</div>
<div class="col-12 col-md-8 offset-md-2 order-2 bg-light border">
3
</div>
<div class="col-8 offset-4 col-md-2 offset-md-0 bg-light border">
4
</div>
<div class="col-12 col-md-2 order-3 bg-light border">
5
</div>
</div>
</div>
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>
I want to display two columns display for all screen sizes and the code does not working in small screen size. I use bootstrap grid system and I don't know why it is not working as I excepted.
<div class="app-content content container-fluid">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body"><!-- stats -->
<div class="row match-height">
<div class="col-xl-6 col-lg-6">
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
<div class="card-block">
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
<div class="row">
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Air Tempeature
</div>
<div class="col-lg-6 col-sm-6 col-md-6 col-6">
Soil Temperature
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to learn Bootstrap in particular Bootstrap 4 but struggling with my footer.
It has 2 rows and i want the entire thing centered but struggling.
Below is my HTML i currently have
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-4 col-md-1 px-0">
<span class="h5">Follow us:</span>
</div>
<div class="offset-1 col-10 offset-md-0 col-md-3 px-0">
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-12 col-md-2">
Terms and conditions
</div>
<div class="col-12 col-md-2">
Privacy policy
</div>
<div class="col-12 col-md-1">
Careers
</div>
</div>
</div>
</footer>
Which turns out looking like the below on desktop but all parts over the place and i have been trying for hours to sort it
And mobile looks likes fine though
<section class="block-follow-us">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-lg-12 col-md-12 text-center">
<span class="h5">Follow us:</span>
Link1
Link2
Link3
Link4
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container-fluid">
<div class="row text-center">
<div class="col-lg-12">© 2019 - Apollo Scientific Ltd</div>
</div>
<div class="row justify-content-center text-center">
<div class="col-lg-4">
Terms and conditions
</div>
<div class="col-lg-4">
Privacy policy
</div>
<div class="col-lg-4">
Careers
</div>
</div>
</div>
</footer>