<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.
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
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>
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.
I have a Bootstrap 4 grid that has one column that is 9 units and one column that is 3 units but the 9 unit column is not taking up 3/4 of the page width as it should.
The html looks like this:
.features-image2 {
max-width: 140px;
min-width: 140px;
width: 140px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 ">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 ">
<img class="col-sm-3 features-image2" src="http://placehold.it/140x140">
</div>
</div>
</div>
The screen looks like this (the table should take up 9 columns 3/4 of screen width but it doesn't):
The effect I am trying to achieve is to centre both the table and the image both vertically and horizontally in the col-3
There are a few issues with your layout...
Use 3 col-sm-4 to consume 1/3 of the col-sm-9
Dont use the col-sm-12 class on the image
Use flexbox and min-height on the container to center vertically
Change col-sm-9 to col-sm-8 offset-sm-1 to center horizontally (optional)
Demo http://www.codeply.com/go/DbV50b96vz
<div id="services" class="container-fluid text-center d-flex">
<div class="row text-center w-100 align-items-center">
<div class="col-sm-8 offset-sm-1">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-2 text-center">
<img class="features-image2" src="//placehold.it/500x800">
</div>
</div>
</div>
There is a few issues with your implementation:
1st: why did you put those tags? they are unnecessary
2nd: I
think it is better to make image a background image of the block, not
just put it inside.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css';
.features-image2 {
/*max-width: 140px;
min-width: 140px;
width: 140px;*/
}
.block-left{
height: 500px;
background: red;
}
.block-right{
height: 500px;
background: blue;
background-image: url("https://images-na.ssl-images-amazon.com/images/M/MV5BMjMxMzg3MDI5NV5BMl5BanBnXkFtZTcwOTAxODc0Ng##._V1_UY317_CR31,0,214,317_AL_.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<div id="services" class="container-fluid text-center">
<div class="row text-center">
<div class="col-sm-9 block-left">
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-3">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4 style="color:#303030;">HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<div class="col-sm-3 block-right">
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
So I have this code:
https://jsfiddle.net/bdqgszv5/1/
Code without jsfiddle:
<section id="aussteller" class="row separated">
<div class="section-header text-center">
<h2>Aussteller</h2>
<h4>Unsere Aussteller informieren Sie über die neusten Innovationen</h4>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://allbrochures.net/wp-content/uploads/2015/04/ricoh-logo.jpg" alt="Ricoh">
</div>
</div>
<h3>Ricoh</h3>
<p>Zeigt uns im RICOH-truck die neusten Drucksysteme</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://reonline.com/wp-content/uploads/2014/01/lexmark-logo-18863_640x480.jpg" style="width: 220px; height: 220px" alt="Lexmark">
</div>
</div>
<h3>Lexmark</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://www.samsung.com/us/images/common/samsung-logo.jpg" style="width: 220px; height: 220px" alt="Samsung">
</div>
</div>
<h3>Samsung</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://cf.juggle-images.com/matte/white/280x280/papyrus-logo-primary.jpg" style="width: 220px; height: 220px" alt="Papyrus">
</div>
</div>
<h3>Papyrus</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://seeklogo.com/images/F/Fujitsu-logo-5CECF13A58-seeklogo.com.gif" style="width: 220px; height: 220px" alt="aussteller 5">
</div>
</div>
<h3>Fujitsu</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="aussteller">
<div class="aussteller-info">
<div class="aussteller-photo">
<img src="http://a1135.phobos.apple.com/us/r30/Purple4/v4/5f/85/bd/5f85bd7c-f6f9-6544-25fb-f00fd604b21a/mzl.snejseuw.png" style="width: 220px; height: 220px" alt="aussteller 6">
</div>
</div>
<h3>ELO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</section>
Now I would like to reorder it, so that I can get this:
It should be responsive and never loose the order.
How could I do this?
I'm just familiar with css foundation, but I believe is almost the same setup with 12 as the magical number. Code it as a grid width small 2 columns and leave some empty to match your layout.
EDIT: you can use the empty spaces as small 4 columns, or if you can use a center class if possible. Good luck :)