Im trying to create a template like this one:
But im not sure if I have to created with css, bootstrap or both.
This is what I have
HTML:
<div class="square">
<div class="col-md-12">
<div class="col-md-2">
<img src="../Images/logo.png" class="text-left" style="width:120px;"/>
</div>
<div class="col-md-5 text-center">
<h4>Alert PLC</h4>
</div>
<div class="col-md-5 text-center">
<h4>No. Alert: 44445543</h4>
</div>
<div class="col-md-10">
<hr class="line" />
</div>
</div>
CSS
body {
background-color: #aeaeae;
}
.square {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.line {
height: 4px;
color: #000000;
border-radius: 2px;
background-color: #000000;
}
Here is JSfiddle demo
Hope it will help you.I made several changes in html.
HTML:
<body>
<div class="square">
<div class="row">
<div class="col-md-4">
<img src="https://image.freepik.com/free-vector/retro-retro-hipster-bicycle-design_23-2147491723.jpg" class="pull-left" style="width:120px;"/>
</div>
<div class="col-md-4 text-center">
<h4>Alert PLC</h4>
</div>
<hr class="line" />
<div class="col-md-4 text-center">
<h4>No. Alert: 44445543</h4>
</div>
</div>
</div>
</body>
Related
I have the following snippet (open snippet as full page) :
#container_1{
margin-top: 50px;
margin-bottom: 150px;
}
.block1{
background: green;
margin-bottom: 15px;
color: #FFFFFF;
}
#moving_block{
z-index: 0;
background-color: purple;
color: #FFFFFF;
}
#footer{
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="container_1" class="container">
<div class="col-md-5 col-md-offset-1">
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
<div class="row block1">
<div class="col-md-8">
<p>TEXT</p>
</div>
</div>
</div>
<div class="col-md-4">
<div id="moving_block" class="col-md-3 affix">
<div class="row">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
I would like to stop the purple block when he encounter the last green block.
This can be done using position:sticky.
I consider bootstrap V4 for this since there is builtin function for sticky. I also simplified the code to keep only the relevant one for the demo:
#container_1 {
margin-top: 50px;
margin-bottom: 150px;
}
.block1 {
background: green;
color: #FFFFFF;
}
.block1:not(:last-child) {
margin-bottom: 15px;
}
#moving_block {
background-color: purple;
color: #FFFFFF;
}
#footer {
background-color: gray;
height: 5000px;
color: #FFFFFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div id="container_1" class="container">
<div class="row">
<div class="col-5 col-offset-1">
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
<div class="row block1">
<p>TEXT</p>
</div>
</div>
<div class="col-6">
<div id="moving_block" class="overflow-auto position-sticky sticky-top">
<p>TEXT</p>
</div>
</div>
</div>
</div>
<section id="footer">
MY FOOTER
</section>
I'm trying to make a row responsive in a way that mobile rows go vertically instead of horizontal and I still have all those fancy boxes, could anyone help me in any way?
I already tried changing the columns up, css-flexbox, but I'm most likely just doing something horribly wrong.
#caixas {
background-color: #58373791;
padding-top: 5px;
padding-right: 30px;
padding-bottom: 5px;
padding-left: 25px;
}
#caixas2 {
background-color: #b6696a91;
padding-top: 5px;
padding-right: 30px;
padding-left: 25px;
padding-bottom: 5px;
}
#border {
border: solid 3px red;
}
<div class='col-lg-12 col-md-12 col-sm-12'>
<div id="border" class="container">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Português</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Portuguese Student</h3>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Internacional</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Internacional Student</h3>
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-4">
<div id="caixas" class="container">
<h3 class="h2sm" align="center">Estudante </h3>
<h4 class="h1sm " align="center">Intercâmbio</h4>
</div>
<div id="caixas2" class="container">
<h3 class="h3sm" align="center">Exchange Student</h3>
</div>
</div>
</div>
</div>
</div>
HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
I have managed to make vertical spaces between the columns by adding padding to the rows. But now the horizontal spaces between the contents are ways too much. How can I configure the spacing between them?
That large horizontal space is because of the fixed width of the content class if you remove that, you'll see it grow.
You can set the width of the content in % or add a margin to the content class.
.container {
text-align: center;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
}
.row{
padding:15px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 col4">
<div class="content">1x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">1x3</div>
</div>
</div>
<div class="row ">
<div class="col-md-4 col4">
<div class="content">2x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x2</div>
</div>
<div class="col-md-4 col4">
<div class="content">2x3</div>
</div>
</div>
<div class="row col4 col4">
<div class="col-md-4 col4">
<div class="content">3x1</div>
</div>
<div class="col-md-4 col4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
CSS Grid to achieve that layout you desire:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 5px;
position:absolute;
left:50%;
transform:translateX(-50%);
width:80%;
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height:100px;
max-width: 350px;
}
<div class="grid-container">
<div class="item">1x1</div>
<div class="item">1x2</div>
<div class="item">1x3</div>
<div class="item">2x1</div>
<div class="item">2x2</div>
<div class="item">2x3</div>
<div class="item">3x1</div>
<div class="item">3x2</div>
<div class="item">3x3</div>
</div>
Using flexbox:
.flex-container {
display: flex;
/*Generates a flexbox layout with default flex direction as row */
width: 100%;
/* Not really required */
align-items: center;
/*Aligns contents vertically */
justify-content: center;
/*Aligns contents horizontally */
text-align: center;
/*Aligns further text in the center */
}
.item {
background-color: gray;
text-align: center;
font-size: 30px;
min-height: 400px;
width: 300px;
margin: 5px;
}
<div class="flex-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="flex-container">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex-container">
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Use float:left; with class content as below:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
float: left;
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.row{
padding: 5px;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="content">1x1</div>
</div>
<div class="col-md-4">
<div class="content">1x2</div>
</div>
<div class="col-md-4">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">2x1</div>
</div>
<div class="col-md-4">
<div class="content">2x2</div>
</div>
<div class="col-md-4">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="content">3x1</div>
</div>
<div class="col-md-4">
<div class="content">3x2</div>
</div>
<div class="col-md-4">
<div class="content">3x3</div>
</div>
</div>
</div>
If I'm reading your request correctly, you are just asking how to make it look like the boxes are in the center of the page, and they are evenly spaced. see if this is what you're looking for:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.col-md-4 {
margin: 5px -10px 0px -4px;;
}
play with the numbers until you get the desired location.
Though I would strongly suggest that you add your own class in addition to col-md-4 to the boxes, which will prevent this new setting to col-md-4 from affecting any future use of this bootstrap class.
in other words . . .
CSS:
.container {
text-align: center;
display: flex;
flex-direction: column;
}
.content {
background-color: #1A1919;
color: white;
height: 400px;
width: 300px;
}
.box-move {
margin: 5px -10px 0px -4px;;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-md-4 box-move">
<div class="content">1x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">2x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4 box-move">
<div class="content">3x1</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x2</div>
</div>
<div class="col-md-4 box-move">
<div class="content">3x3</div>
</div>
</div>
</div>
You can remove a lot of the stuff there and simplify it to make it responsive width a set margin:
.contents {
background-color: black;
color: white;
height: 500px;
margin: 20px 0px;
}
<div class="container-fluid text-center">
<div class="row">
<div class="col-md-4">
<div class="contents">1x1</div>
</div>
<div class="col-md-4">
<div class="contents">1x2</div>
</div>
<div class="col-md-4">
<div class="contents">1x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">2x1</div>
</div>
<div class="col-md-4">
<div class="contents">2x2</div>
</div>
<div class="col-md-4">
<div class="contents">2x3</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="contents">3x1</div>
</div>
<div class="col-md-4">
<div class="contents">3x2</div>
</div>
<div class="col-md-4">
<div class="contents">3x3</div>
</div>
</div>
</div>
</div>
Greetings i am kinda new to boostrap, Anyhow, I am trying to Create is, Boxes to look like this (right side):
And so far i got nothing. i used padding but it mess up my grid system, what i did was give a col-sm-8 for picture side and a col-sm-4 for boxes however it is where it gets tricky it always mess my grid system. this is my html. could you help me out a little bit?
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="xxxx" />
</div>
<div class="col-sm-4">
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Oven
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cookers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Microwave Ovens
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Steamers
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle">
Hobs
</div>
</div>
</div>
</div>
</div>
You are missing a row class, it's mandatory for nested rows/columns, so you can do this (go full page to see the result as you want) :
.box {
background-color: grey;
padding: 25px;
text-align: center;
vertical-align: middle;
margin: 10px;
}
img {
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="https://lorempixel.com/800/400/" />
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">
<div class="box">
Oven
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cookers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Microwave
</div>
</div>
<div class="col-sm-6">
<div class="box">
Steamers
</div>
</div>
<div class="col-sm-6">
<div class="box">
Cooker hoods
</div>
</div>
<div class="col-sm-6">
<div class="box">
Hobs
</div>
</div>
</div>
</div>
</div>
</div>
You can read more about grid nesting
So I'm in a coding Boot camp, been coding for a little over 1.5 months. For one of my assignments, I was to create a mobile responsive portfolio using Bootstrap. The directions clearly stated not to use media queries, as the queries are under the hood on of my TAs told me. Inasmuch as I'm not allowed to implement explicit use of queries, I seem to be stumped. I already turned the assignment is, but dont want to skim ovedr the solution - if there is one. Here is my html:
<div class="container" id="page">
<div class="row">
<div class="col-md-8 col-xs-12">
<div class="container-fluid">
<div class="panel" id="main-section">
<div class="panel-heading">
<h4 id="headings">Portfolio</h4>
<div class="row" id="box-search">
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="hangman.jpg" class="image-responsive" id="images-left">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff" id="text-box">Hangman</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="rpg.jpg" class="image-responsive" id="images-right">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff">Role Player Game</p>
</div>
</div>
</div>
</div>
<div class="row" id="box-search">
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="trivia.jpg" class="image-responsive" id="images-left">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff"`enter code here`>Trivia</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="rutgers.jpg" class="image-responsive" id="images-right">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff" id="text-box">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
<div class="row" id="box-search">
<div class="col-md-6 col-xs-12">
<div class="thumbnail text-center">
<img src="rps.jpg " class="image-responsive " id="images-left">
<div class="caption">
<p style="background-color: #2c3e50; color: #ffffff;" id="text-box">Rock Paper Scissors</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and the css:
.thumbnail {
position: relative;
}
.caption {
position: absolute;
top: 75%;
left: 0px;
width: 190px;
text-align: center;
}
#images-left,
#images-right {
height: 190px;
width: 190px;
}
/*portfolio styling*/
#main-section-port {
min-width: 300px;
max-width: 640px;
float: left;
background-color: #ffffff;
margin-bottom: 80px;
}
and here is a link to the actual website if you'd like to see: afflatus480.github.io
Again, I already submitted the work, so no need to rush. But any help will be appreciated nonetheless. Thank you for your time.