I am trying to make it so the text on the left stays in the position it is in but the red block becomes full-width on the right side.
This is the code below which is using Bootstrap 3.
<!-- Bootstrap-3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Body -->
<div class="hero">
<div class="container">
<div class="row row-split">
<div class="col-sm-7">
<div class="col-sm-12">
<h2 class="hero__title primary-font dullblue">Some really cool text.</h2>
</div>
<div class="col-sm-12">
<div class="hero__paragraph secondary-font">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-sm-12">
<button class="hero__button secondary-font">Shop Now</button>
</div>
</div>
<div class="col-sm-5 hero__background">
</div>
</div>
</div>
</div>
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
I have the problem about css for make a same height. I have a the list designs and every design have description in the bottom, in my case, I already to make design middle of portrait and landscape,
but if the description have the long text can't same line with other. I want to the description
flat top only using css not javascript, like a image bellow
enter image description here
I using the bootstrap flex
HTML
<div class="row">
<div class="col-12 col-md-8 p-4 d-flex flex-column">
<div class="my-auto">
<img/>
</div>
<div class="description my-3">
</div>
</div>
<div class="col-12 col-md-8 p-4 d-flex flex-column">
<div class="my-auto">
<img/>
</div>
<div class="description my-3">
</div>
</div>
</div>
CSS
.flex-column {
-webkit-box-orient: vertical!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
Please help me for fixing my problem, thank you for your help, sorry my english is bad
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Same height</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellendus, molestias animi deleniti cum</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
</div>
</div>
</body>
</html>
Check this working example. You just need to add the fixed height to class
my-auto + vertical-align: middle;, then all product description will stay in the same line. Don't forget to add max-height: 100% to image to avoid overflow.
Hope this helps.
.my-auto {
justify-content: center;
vertical-align: middle;
height: 300px;
display: flex;
align-items: center;
}
.my-auto img {
max-height: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Same height</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 p-4 border">
<div class="my-auto w-100">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 border">
<div class="my-auto w-100">
<img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellendus, molestias animi deleniti cum</div>
</div>
<div class="col-4 p-4 border">
<div class="my-auto w-100">
<img src="https://via.placeholder.com/200x300/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
</div>
</div>
</body>
</html>
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>
<div class="container-fluid">
<div class="row justify-content-md-center text-center">
<div class="col-md-12">
<h1>Odaberi Paket</h1>
</div>
<div class="col-12">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-xl-3 cl-md-3">
<div class="pricing-table">
<div class="panel panel-primary">
<div class="controle-header panel-heading panel-heading-landing">
<span class="price-value">150<span class="currency">EUR</span></span>
<h3 class="panel-title panel-title-landing">Pocetni Paket</h3>
</div>
<div class="panel-body panel-body-landing">
<table class="table">
<p>Lorem ipsum dolor <br>sit amet, consectetur adipiscing elit.</p>
</table>
</div>
<div class="panel-footer panel-footer-landing">
Odaberi
</div>
</div>
</div>
<img class="saksijica" src="np-assets/images/saksijica.png">
</div>
<div class="col-xl-3 cl-md-3">
<img class="cat" src="np-assets/images/maca.png">
<div class="pricing-table">
<div class="panel panel-primary">
<div class="controle-header panel-heading panel-heading-landing">
<span class="price-value">150<span class="currency">EUR+DODACI</span></span>
<h3 class="panel-title panel-title-landing">Pro Paket</h3>
</div>
<div class="panel-body panel-body-landing">
<table class="table">
<p>Lorem ipsum dolor <br>sit amet, consectetur adipiscing elit.</p>
</table>
</div>
<div class="panel-footer panel-footer-landing">
Odaberi
</div>
</div>
</div>
</div>
</div>
</div>
Newbie here.
I have a problem aligning pricing tables and centering them, and on top of all that there should be a picture on the down left corner of left pricing table and on the top of the right should be also a picture.
Here is my code someone help me to mension there should be no padding between them.
I just started learning bootstrap and I have an issue of cols not displaying inline even when they are in the same row.
Code:
<div class="container">
<div class="row">
<div class="col-sx-6">
<h2>Lorem Ipsum Dolor</h2>
<p>
Sit amet something else.
</p>
</div>
<div class="col-sx-6">
<img src="http://www.irealb.com/wp-content/uploads/2012/08/half-iphone-player.png" width="250px" alt="Iphone">
</div>
</div>
</div>
Expected Result: http://i.imgur.com/KygHf0g.png
Actual Result: http://i.imgur.com/2bR6fXg.png
JSfiddle: http://jsfiddle.net/ojhLm1vt/
I include Bootstrap the following manner:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" media="screen">
It's col-xs-*, not col-sx-*.
FIDDLE
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>Lorem Ipsum Dolor</h2>
<p>
Sit amet something else.
</p>
</div>
<div class="col-xs-6">
<img src="http://www.irealb.com/wp-content/uploads/2012/08/half-iphone-player.png" width="250px" alt="Iphone">
</div>
</div>
</div>