i'm creating website using CSS, HTML and BOOTSTRAP.. in my below code i tried to do same design (text overlapped with image) as in image below
but actually when adding any svgs on left and right side it goes in new line and not as i wanted to, i tried also cols but it takes too small size from the design .. is there any way to add background as svg on left for ex or is there any way to do it better?
#FifthBlock {
background: -webkit-linear-gradient(180deg, #19191a 50%, #ffffff 23%);
}
.steptext {
left : 98px !important;
position : relative;
background : white;
height : 101px;
padding : 44px;
margin-top : 29px;
text-align : end;
width : 371px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row" id="FifthBlock">
<div class="container" id="Fifth" style="width: 100%;">
<div class="row">
<h5 class="steptext">blablabla
</h5>
<img src="https://proest.com/wp-content/uploads/2022/06/Civil-Engineering-Projects.jpg" style="max-width: 200px;">
</div>
<div class="row mt-3">
<h5 class="steptext">blablabla</h5>
<img src="https://proest.com/wp-content/uploads/2022/06/Civil-Engineering-Projects.jpg" style="max-width: 200px;">
</div>
<div class="row mt-3">
<h5 class="steptext">blablabla
</h5>
<img src="https://proest.com/wp-content/uploads/2022/06/Civil-Engineering-Projects.jpg" style="max-width: 200px;">
</div>
</div>
</div>
thank you
Related
I am using bootstrap but while using row class I am getting horizontal scroll bar
<div class="row" style="margin-top: 10px; margin-right: 10px;">
<div class="card col-md-3" style="max-height:fit-content; background-color: khaki;" >
<div class="d-flex justify-content-center mg">
<img src="https://image.flaticon.com/icons/png/512/897/897219.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Artificial intelligence</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: cornflowerblue;" >
<div class="d-flex justify-content-center mg" >
<img src="https://image.flaticon.com/icons/png/512/888/888991.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Web development</h5>
</div>
</div>
<div class="card col-md-3" style="max-height:fit-content; background-color: darkcyan;" >
<div class="d-flex justify-content-center mg" >
<img src="https://image.flaticon.com/icons/png/512/2641/2641044.png" style="max-width:50%;" alt="Card image cap">
</div>
<div class="d-flex justify-content-center">
<h5 class="card-title">Image processinge</h5>
</div>
</div>
</div>
Output
image output
please help
I have deleted fourth row from code due code code limitation on stackoverflow
Because you didn't give us your whole CSS style sheet this is hard to debug, so I give you a method to debug this yourself.
You can use the * and outline to see which items are out of line and correct them to float properly.
* {
outline: 1px solid purple;
}
* > * {
outline: 1px solid blue;
}
* > * > * {
outline: 1px solid red;
}
/* example CSS not part of the answer */
div, span {
padding: 20px;
margin: 4px;
}
h1 {
padding: 10px;
margin-bottom: 12px;
}
<div>
<h1>Testing page</h1>
<div>
<div>Wooow</div>
<span>This</span><span>is</span><span>Doge</span>
<div>
<div>
New level
</div>
</div>
</div>
</div>
My best guess is that you are using on the "row" class the margin-right where you should be using the padding-right. The "row" class uses 100% of the space it's put on, and you are using 100% + 10px, hence the scrollbar.
One other guess is the row below that seem bigger, it could be reason for scrollbar.
First of all, thanks to you all for helping a lot of people!
Second of all, sorry for posting images in Spanish but I have no time to translate it into English. Anyway, text in photos are not relevant.
In this time I'm trying to develop and interactive degree program. Right now, it looks like this:
My idea is to manage card to:
Get same size on all cards
Keep all content (top, middle and bottom) inside cards
Manage middle content (name of a course in Spanish) to resize in favor to preserve card size
For example if i put 150% zoom, everything turn into this:
And if I put 50% zoom it looks about what I'm looking for:
I put a minimize snippet where you can reproduce two courses in one year.
.row {
margin-bottom: 0px !important;
}
#yearHolder {
margin-left: 5px;
}
.col .s12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.card-content {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.card.small {
height: 150px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Document</title>
</head>
<body>
<div id="malla" class="row">
<div id="1year" class="col l2 s6 offset-l1"><h6 class="center">First Year</h6>
<div id="yearHolder" class="row">
<div id="1semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1000</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Algebra y GeometrÃa</h6>
</div>
<div class="card-tabs ">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="2semester" class="col s6">
<div class="col s12">
<div class="card horizontal red">
<div class="card-stacked ">
<div class="card-tabs">
<div class="col left">CBM-1010</div>
<div class="col right">8</div>
</div>
<div class="card-content">
<h6 class="black-text text-flow center-align">Comunicación Elemental para la Ingenieria</h6>
</div>
<div class="card-tab">
<div class="row">
<div class="col left">1</div>
<div class="col right">12,13,15</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please advice me if I'm not asking in format to quickly fix in favor to get help
Again, thanks to you all!
Materialize widths should be left alone else this will happen. You seem to be overwriting the purpose of their grid system by using the !important feature. Also by targeting them in this way you will change the markup across your entire website which may not be desired. I would suggest adding a new class name to all those divs, then target your own made up classes.
Sizes:
Add a class to all divs called sameSizeCards
Css:
.sameSizeCards{
Height: ______;
Width: 100%; (let Materialize sort the width)
}
Text sizing:
Use #media queries to scale your text-size based on screen widths.
Materialize provides three utility classes (small, medium and large) for cards that fix the height at 300px, 400px, and 500px respectively:
<div class="card small">
<!-- I will be 300px high -->
</div>
https://codepen.io/doughballs/pen/JjRVOgz
I have an HTML defined as follows:
<div id="container" className='row'>
<div className='col-sm-9 col-md-6 col-lg-8'>
</div>
<div className='col-sm-3 col-md-6 col-lg-4'>
<button id="bot" />
</div>
</div>
So, I want the button with the id of bot (or its container div) to be placed at the bottom relative to the container div with the class row.
I tried to do this:
#container
{
position: relative;
}
#bot
{
position: absolute;
bottom: 0;
}
But, this changes the design considerably, as it will push the bot to the left and on top of its sibling div. As you can see I'm using Bootstrap for dividing it into grids. How can I push this button to the bottom with CSS in my case?
Use d-flex at div and align-self-end for button
Example : https://jsfiddle.net/guiljs/rupoc45j/
<div class='col-sm-3 col-md-6 col-lg-4 bg-success d-flex'>
Lorem ipsum
<br />
<button id="bot" class=" align-self-end">
Button at Bottom!
</button>
</div>
If you're using React, just change class to className as your sample code.
Using display:flex; you can make the contents of the second column align to the end of the column.
.full-height {
min-height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container py-3 full-height">
<div class='row'>
<div class='col-sm-9 col-md-6 col-lg-8'>
This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This column has content. This
column has content. This column has content. This column has content.
</div>
<div class='col-sm-3 col-md-6 col-lg-4 d-flex flex-column justify-content-end'>
<button>Button</button>
</div>
</div>
</div>
You're looking for Bootstrap's align-items-end property. Here is a runnable example:
#container {
position: relative;
height: 100px;
width: 300px;
background: gray;
}
#bot {
background: black;
width: 50px;
height: 50px;
}
#first {
height: 100%;
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div id="container" class='row align-items-end'>
<div id="first" class='col-sm-9 col-md-6 col-lg-8'>
</div>
<div class='col-sm-3 col-md-6 col-lg-4'>
<button id="bot" />
</div>
</div>
If you only want just that one item aligned to the bottom, see Guilherme de Jesus Santos's answer for an example using align-self-end.
Try #bot's container css
as
'{
height:100%;
}`
I am making a small eastern project. The website is here: My Website.
I need to make some boxes that contain a png picture on top of the background-picture like this:
I set the picture on the col, but I guess I need to make it as a background in CSS, since I cannot build something on top of an img tag:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<center><img src="https://mimsi.dk/images/logo.jpg" class="img-fluid" alt="Eastern"></center>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="https://mimsi.dk/images/eeg.jpg" alt="Eastern game" class="background">
</div>
</div class="row">
<div class="col-md-12" style="border: 1px solid red;">
<h1 style="text-align: center;">FOOTER</h1>
</div>
</div>
</div>
Instead of using the img src tag, I set this in my HTML and CSS:
<div class="col-md-12 bg">
.bg {
background-image: url("https://mimsi.dk/images/eeg.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But nothing has worked out yet. How can I set the background-image, so it is not going to the header logo or footer, so I can build my 8 boxes on top?
First there is a mistake in your HTML in this line </div class="row"> i think you got that you can't put class in closing div
Solution
I created a fiddle
I'm struggling on how I will code to create a two vertical images and is it possible to lessen the height of the larger image without lessen the width? because I need to fit it on col-md-8 any thoughts about this?
this is the image I need to make.
Click here
HTML and CSS code:
.img-big{ height: 100%;width: 100%; }
<div class="row col-md-8">
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
</div
the above code is what I've used to make the bigger image beside image 2 and 3. the dimension of the large image is 900x767
You can use the flexbox property to achieve what you want and set the image as background.
body, html {
margin: 0;
padding: 0;
color: white;
}
.container {
height: 767px;
display: flex;
}
.left {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 1;
}
.right {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.one {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
.two {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
<div class="container">
<div class="left">Left image</div>
<div class="right">
<div class="one">First image</div>
<div class="two">Second image</div>
</div>
</div>
In Bootstrap 5, you can use d-grid gap-x. For example:
HTML
.content {
background-color: transparent;}
.content .left, .content .right {
float: left;}
.full-width-band-hd {
margin-top: -35px;}
.txt-yellow {
color: var(--bs-yellow);}
<section class="container-lg">
<div class="content row">
<h2 class="txt-yellow full-width-band-hd">Head</h2>
<!-- Left Side -->
<h6 class="text-yellow">H6 head</h6>
<h3 class="text-yellow">H3 head</h3>
</div>
<!-- style in content row will become a class later-->
<div class="content row" style="height: 642px;">
<div class="col-md-4 left d-grid gap-3">
<div class="">
<img src="image1" width="100%" height="auto" alt="fp1">
</div>
<div class="">
<img src="image2" width="100%" height="auto" alt="fp2">
</div>
</div>
<!-- End of Left Side -->
<div class="col-md-8 left">
<div class="">
<img src="image3" width="100%" height="auto" alt="fp3">
</div>
</div>
<!-- End of col-md-8 -->
</div><!-- content row -->
</section>
You should format your code like below:
<div class="row">
<div class="col-md-8">
<img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
<div class="col-md-4">
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
</div>
As you can see the two images at the bottom in col-md-4 if you spread the width 100% the next image will drop below.
You shouldnt really have a class with both a row and a col-md in the class name. (See http://getbootstrap.com/css/)
With regards to reducing the height and not the width are you not able to crop the image down on Paint or Photoshop and upload the image with the correct height?