I had to make div table, because I didn't see a way to do it with a bootstrap table element.
Here is image:
Here is the code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
<div class="col-12">
<p class="text-white"><b>Lorem ipsum</b></p>
</div>
</div>
<div class="row border-left border-right text-center">
<div class="col-8 pt-3 pb-0 border-right">
<p>Lorem ipsum</p>
</div>
<div class="col-4 pt-3 pb-0">
<p>Lorem ipsum</p>
</div>
</div>
<div class="row border text-center">
<div class="col-10">
<div class="row">
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
<div class="row border-top">
<div class="col bg-primary-dark pt-3 pb-0" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
</div>
<div class="row border-top">
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
<div class="col bg-info-dark pt-3 pb-0 border-right" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
</div>
</div>
<div class="col-2 pt-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</p>
</div>
</div>
Now I want this to be responsive. Horizontal scroll, or any other way, any suggestions would be greatly appreciated
The class col in bootstrap will divide the row into amount of col elements you added.To make it responsive specify width of element for each screen type, using such classes as col-sm-12 (full width on small devices), col-md-6 (two column grid for medium screens) etc. Don't forget, bootstrap is mobile first.
Related
For bannerimage section which has texts on the specific position, I don't want to write custom CSS to place the div. The below code fits correctly according to design and it's good in responsive also. I've not used this code everywhere but only in 1 section where there is a condition to display div or text at a specific position. I don't want to write custom CSS. But using bootstrap empty div problem is solving, Is this correct or not.
<div class="mainbannerimagewithtext">
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 media ">
<div class="col px-5 ">
<p class="twentyfive ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteen">Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet,
consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
<p class="adm-nf-twenty"></p>
<p class="adm-nf-twentyitalic"></p>
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class="bluebox ">
<div class="text-start px-5 py-5">
<p class="twenty">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="twentyitalic">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite"> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
My opinion is you should consider using offset for the best practice, also you can customize it for all available screen size Bootstrap provided.
Like this for example :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">normal .col-md-4</div>
<div class="col-md-4 offset-md-4">.col-4 getting offset for 4 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 getting offset for 3 col in md screen size</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Also always remember offset always arrange the column to the right
Here is the HTML code. I am good with coding in react.js and vue.js, but I am having a hard time getting the sense of making things responsive. I dont have experience with it. But got to start somewhere. Any suggestions would be helpful.
Right now, if you make the screen size smaller. It looks horrible.
Html/bootstrap
<section id="info" class="py-3 ">
<div class="container text-white">
<div class="row justify-content-center">
<h2 class="text-white title">Lorem ipsum dolor sit</h1>
<p class="text-white cyp-para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="row">
<div class="col-6 align-self-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp"> Lorem ipsum dolor</h1>
</div>
<div class="col-6 justify-content-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp">Lorem ipsum dolor</h1>
</div>
</div>
</div>
</section>
CSS:
#info{
height: 515px;
width: 732px;
background: #151515 0% 0% no-repeat padding-box;
}
.cyp-para{
padding: 0px 200px;
font-size: 14px;
}
.placeholder{
width: 236px;
height: 283px;
background: grey;
}
.title{
font-size: 38px;
}
.exp{
font-size: 33px;
}
Since you are using bootstrap, you can use break-point classes to make your code responsive.
Make small changes like below and your code will look better:
<section id="info" class="py-3 ">
<div class="container text-white">
<div class="row justify-content-center">
<h2 class="text-white title">Lorem ipsum dolor sit</h1>
<p class="text-white cyp-para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="row">
<div class="col-12 col-md-6 align-self-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp"> Lorem ipsum dolor</h1>
</div>
<div class="col-12 col-md-6 justify-content-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp">Lorem ipsum dolor</h1>
</div>
</div>
</div>
</section>
I have included col-12 and col-md-6 classed in your code. Which means till medium size devices, you have 12 column divs i-e 1 full column width div, and when your screen size becomes medium and above medium you'll have two column's per row
I have a simple two column Bootstrap 4 layout, as follows:
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<p>Left column</p>
<p>Left column</p>
<p>Left column</p>
</div>
<div class="col-md-9">
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
</div>
</div>
</main>
How do I make the right column always end at the bottom of the screen, and be vertically scrollable? In some cases, the right content will be only a few lines and will fit on a single screen. Other times it will have dozens of paragraphs.
EDIT: A couple of additional points:
In case it is not clear from the question itself, I want the right column to stretch to the bottom of the view port
There are other elements above the main, including a nav, and their height may vary dynamically
You can add two css properties, so your right column will always stretch till the full length of your available page size. And when the data will try to go beyond you visible page space, a vertical scroll will appear.
Sample code:
<div class="col-md-9" style="height: 100vh; overflow-y: auto;">
Here is the working sandbox: https://codesandbox.io/s/bootstrap-4-scroll-example-stackoverflow-0gdht
The question isn't entirely clear on what's expected on mobile. I'm assuming that you want the right column scrollable independent of the body so the nav remains at the top. I'm also assuming that you want the left sidebar to be scrollable as needed (independent of the body).
Therefore, I think you just need to make position:absolute responsive:
/* 768 is the medium breakpoint */
#media (min-width: 768px) {
.position-md-absolute {
position: absolute;
}
}
and, the remainder is possible using Bootstrap utility classes:
<body class="d-flex flex-column min-vh-100">
<nav class="navbar">
...
</nav>
<main class="d-flex flex-column flex-fill">
<div class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-fill flex-column flex-md-row">
<div class="col-md-3 overflow-auto">
<div class="position-md-absolute">
..
</div>
</div>
<div class="col-md-9 overflow-auto flex-fill">
<div class="position-md-absolute">
..
</div>
</div>
</div>
</div>
</main>
</body>
/* 768 is the medium breakpoint */
#media (min-width: 768px) {
.position-md-absolute {
position: absolute;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-light bg-info">
<a class="navbar-brand" href="#">Nav</a>
</nav>
<main class="d-flex flex-column flex-fill">
<div class="container-fluid d-flex flex-column flex-fill">
<div class="row flex-fill flex-column flex-md-row">
<div class="col-md-3 overflow-auto">
<div class="position-md-absolute">
<p>Left column</p>
<p>Left column</p>
<p>Left column</p>
<p>Left column</p>
<p>Left column last</p>
</div>
</div>
<div class="col-md-9 bg-info overflow-auto flex-fill">
<div class="position-md-absolute">
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column ... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
<p>Right column last... Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>
</div>
</div>
</div>
</main>
</body>
Demo: https://codeply.com/p/93751rK5WQ
If you want only one tag occupy full width without disturbing other tags, then you need to make that tag absolute
<div class="col-md-9" style="position:absolute;bottom:0;right:0;top:0;overflow-y: auto">
so that other tags are not disturbed
I cannot align an image to the bottom of the page. Even though, the column is the same height it just doesn't align all the way to the bottom.
Codepen: https://codepen.io/monsmado/pen/WNvmdOL
<div class="container">
<div class="row">
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36">
</a>
</div>
</div>
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36">
</a>
</div>
</div>
<div class="col-sm">
<img src="https://via.placeholder.com/557x347" class="img-fluid">
<h2>Lorem ipsum dolor sit amet consectetur</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="d-sm-flex align-self-end">
<a href="#">
<img src="https://via.placeholder.com/31x36"">
</a>
</div>
</div>
</div>
</div>
You can add display: flex and flex-direction: column to the .col-sm and margin-top: auto to the div contain your bottom item:
CodePen
If you are using bootstrap 4, you can use class d-flex flex-column for .col-sm div and mt-auto for the bottom item div:
CodePen
Can't figure out how to align this item like on photo
Making a web design from my prototype, but stacked here, tried many variations, couldn't figure out, this is what I've got.
If you can help somehow, it is would great.[this is how it should look like1.
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
<div class="row">
<div class="col text-center">
<img class="pqeimg"src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
I guess you are using Bootstrap.
Have a look, maybe this is what you are looking for :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col" style="text-align: center;">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="big-box text-center">
<img class="pqeimg" src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>