I'm trying to create a responsive header in my app with the following elements:
a logo (<img>)
a search bar (<input>)
a link (<a>)
two boxes (<div>)
Elements position depends of the screen size:
Medium screens (md-*)
Small screens (sm-*)
Extra small screens (xs-*)
I manage to create each of these layouts, but not with the responsive classes of Bootstrap... Can you help me here?
Here is the simple code I used to make this example:
<div class="container">
<div class="row vertical-aligned">
<!-- Logo -->
<div class="col-md-2 col-sm-12 col-xs-12">
<img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
</div>
<!-- Search bar -->
<div class="col-md-7 col-sm-6 col-xs-12">
<div class="input-group search-width">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<a>Launch advanced research...</a>
</div>
<!-- Nav boxes -->
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="nav-button">Profil</div>
<div class="nav-button">Settings</div>
</div>
</div>
</div>
JSFiddle here
I solved the issue, i found 2 problems.
The first one with your md screen, the input field and the paragraph would not stay inline, because of the float property, this would be solved by editing the css of the .input-group class as float left. The second problem for the small screen, is that the div will not stack over one other with a 100% width because you set the css property display: flex and center, I created a media query for the window size of small (<768px) to display those div as inline-block. Please comment for any additional help or problems, the code below should be working fine.
UPDATE - Solving the additional requirements for the md and sm size:
For the first problem i added padding top to the id=link, in a media query that will target only md devices, for the second problem with media queries i edited the position of those divs with position relative and left/top attributes.
Thanks
Fabrizio Bertoglio
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row vertical-aligned">
<!-- Logo -->
<div class="col-md-2 col-sm-12 col-xs-12">
<img class="logo" src="http://pngimg.com/upload/cocacola_PNG14.png"/>
</div>
<!-- Search bar -->
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="row">
<div class="input-group col-md-6">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<div class="col-md-4" id="link">
<a>Launch advanced research...</a>
</div>
</div>
</div>
<!-- Nav buttons -->
<div class="col-md-3 col-sm-12 col-xs-12" id="boxes">
<div class="nav-button">Profil</div>
<div class="nav-button">Settings</div>
</div>
</div>
</div>
Css Code
</body>
</html>
.vertical-aligned {
display: flex;
align-items: center;
}
.logo {
width: 100%;
display: block;
}
.nav-button {
height: 70px;
width: 80px;
border: solid 1px black;
display: inline-block;
}
.input-group {
float: left !important;
}
#media (min-width: 992px) {
#link {
padding-top: 6px;
}
}
#media (max-width: 768px) {
.vertical-aligned {
display: inline-block;
}
#boxes {
max-width: 300px;
position: relative;
left: 100%;
transform: translateX(-179px);
top: -5%;
}
a {
position: relative;
top: 49px;
}
}
I hope this answer can help you.
You can use #media to manage every element size in different layout,
for example, on laptop layout:
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {
//your css here
}
/* ----------- Retina Screens ----------- */
#media screen
and (min-device-width: 1200px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 2)
and (min-resolution: 192dpi) {
//your css code here
}
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://www.youtube.com/watch?v=t526Lt_O7zo
Related
I am using a media query with Bootstrap's jumbotron. I want to align vertically two divs inside jumbotron to be mobile responsive. The problem is that under a certain width, jumbotron flaps responsively as expected and my photo in the right stays there rather than aligning vertically with the first div.
To prevent this, I added media query to align the photo to the left of its parent div but I did not get a result.
The code and the pictures are attached.
<div class="jumbotron">
<div class="row">
<div id="about2" class="col-md-6">
<h1>About Me</h1>
<p>This page contains a brief information about Mehmet Eyüpoğlu.
</p>
<a href="index.html">
<i id="home-button" class="fas fa-home"></i>
</a>
</div>
<div class="col-md-6">
<img id="about-foto" src="images/unnamed.jpg" alt="profile.photo">
</div>
</div>
</div>
Css Code:
#about2 {
font-size: 35px;
margin-top: 50px;
}
#about-foto {
max-width: 70%;
border-radius: 10px;
margin-left: 60%;
}
//The actual problem starts here:
#media (max-width: 768px) {
#about-foto {
margin-left: 5%;
}
}
Image showing the desktop size
Image showing the mobile size
You just have a syntax error with your media query, try!
#media screen(max-width: 768px) {
#about-foto {
margin-left: 5%;
}
}
You can find a torough explanation of media queries here.
Don't use margin to align stuff like this, especially not when using bootstrap.
Get familiar with the grid system of bootstrap, you can define a width for every breakpoint.
I changed your markup to use a col-md-8 for your text and col-md-4 for your image. Important thing is that the numbers always add up to 12 (because that's the number bootstrap uses for one line)
This means that for screens with medium (md) size and up you side will be divided by a column with md-8 width and md-4 width, for every screen smaller it will be -12 width (100%)
#about2 {
font-size: 35px;
margin-top: 50px;
}
#about-foto {
max-width: 70%;
border-radius: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="jumbotron">
<div class="row">
<div id="about2" class="col-md-8 ">
<h1>About Me</h1>
<p>This page contains a brief information about Mehmet Eyüpoğlu.
</p>
<a href="index.html">
<i id="home-button" class="fas fa-home"></i>
</a>
</div>
<div class="col-md-4 text-left">
<img id="about-foto" src="images/unnamed.jpg" alt="profile.photo">
</div>
</div>
</div>
I just joined StackOverflow since I recently got back to webdesign and I'm learning Bootstrap. I'm designing my own Website and I'm already facing an issue that I can't resolve myself. I want to achieve the following: Workflow I also would like to make the arrows disappear when the screen size gets so small that make the icons look in a vertical way instead of the regular horizontal way (hope I explained it correctly)
I already tried some things and failed:
1- Instead of using each icon/arrow in a separate img file, I saved them in a unique img file and used the css "img-responsive" class. It looked pretty good on desktop but text looked too small on mobile.
2- After that I got back to trying to make it work with each img in a separate file, I found a post here about getting 7 equal columns and it seems to do what I need but I can't get the images to be close enough as I want to, tried several ways to remove the gutter between the columns and nothing, I think that it might be cause to get the 7 equal columns, the columns itself get a fixed width, not allowing me to get rid of their padding/margin.
Here's what I've got so far:
HTML:
<div id="whyus" class="container-fluid text-center">
<h2>Why Us?</h2>
<div class="row seven-cols">
<div class="col-md-1 no-padding">
<img src="img/Heart_icon.png">
<h4>Passion</h4>
</div>
<div class="col-md-1 no-padding">
<img src="img/Arrow1.png" class="arrow1">
</div>
<div class="col-md-1 no-padding">
<img src="img/Idea_icon.png">
<h4>Ideas</h4>
</div>
<div class="col-md-1 no-padding">
<img src="img/Arrow2.png" class="arrow2">
</div>
<div class="col-md-1 no-padding">
<img src="img/Brain_icon.png">
<h4>Work</h4>
</div>
<div class="col-md-1 no-padding">
<img src="img/Arrow1.png" class="arrow1">
</div>
<div class="col-md-1 no-padding">
<img src="img/Like_icon.png">
<h4>Amazing Results</h4>
</div>
</div>
CSS:
.arrow1 {
padding-top: 75px;
}
#media only screen and (max-width: 768px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 100%;
*width: 100%;
}
}
#media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
#media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
width: 14.285714285714285714285714285714%;
*width: 14.285714285714285714285714285714%;
}
}
And this is how it's looking so far: Website Preview
Sorry for not uploading the code into the snippet, tried but couldn't get it to work so hope you guys get the idea anyway... BIG THANKS!
EDIT:
-ARROWS: arrow1.png arrow2.png (modified the arrows in the code cause I just realized that arrow1 and arrow3 are the same one... I also want to mention that I gave them a class in order to add some padding to them, so they can look like I showed at the beginning of the post in Workflow)
How about this?
Instead of calculating and allocating each item a width, using flex display on seven-cols and flex:1 on the seven-cols divs to make it flexibly grow and shrink.
When the max-width reaches a certain width threshold, change the flex-direction to column and hide the arrows.
.arrow1 {
padding-top: 75px;
}
#media only screen and (max-width: 768px) {
.seven-cols {
display: flex;
flex-direction: column;
}
.arrow1,
.arrow2 {
display:none;
}
}
#media (min-width: 769px) {
.seven-cols {
display: flex;
justify-content: center;
}
.seven-cols>* {
flex: 1;
max-width: 14%;
}
.no-padding .arrow1,
.no-padding .arrow2 {
width: 80%;
}
}
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="whyus" class="container-fluid text-center">
<h2>Why Us?</h2>
<div class="row seven-cols">
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Passion</h4>
</div>
<div class="no-padding">
<img src="https://i.stack.imgur.com/QqJno.png" class="arrow1">
</div>
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Ideas</h4>
</div>
<div class="no-padding">
<img src="https://i.stack.imgur.com/17ox3.png" class="arrow2">
</div>
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Work</h4>
</div>
<div class="no-padding">
<img src="https://i.stack.imgur.com/QqJno.png" class="arrow1">
</div>
<div class="no-padding">
<img src="http://via.placeholder.com/100x100">
<h4>Amazing Results</h4>
</div>
</div>
CSS:
.preview img {
width: 113px;height: 113px;margin-bottom: 6px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-3 col-xs-3 preview">
<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg">
<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg">
<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg">
</div>
<div class="col-md-9 col-xs-9">
<img src="https://pbs.twimg.com/profile_images/794566134611804164/93DBmxZk_400x400.jpg" >
</div>
</div>
I have a div for the preview images of the product at the left and another div for the main preview. What I want is the preview images at the left will be at the bottom of the main preview in mobile mode. Can you advice me what to do or some css tricks?
You can change the flex-direction attribute depending on the media queries to achieve this.
It has been a while since I used bootstrap, but here is a vanilla css example:
.wrapper {
display: flex;
flex-direction: row;
}
#media only screen and (max-width: 750px) {
.wrapper {
flex-direction: column-reverse;
}
}
<div class="wrapper">
<div>links</div>
<div>rechts</div>
</div>
I'm using Bootstrap 3.3.7 and flexbox. I've got flexbox working on a 3 column (3 .col-md-3 inside a .container-fluid) working.
But I want to collapse the columns (each .col-md-3) into single columns on mobile.
How can I do this? My markup is as follows:
<div class="container-fluid">
<div class="row flex text-center">
<div class="col-md-3 software-box-outer">
<h1>
Testing 1
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 2
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 3
</h1>
</div>
</div>
</div>
CSS:
.flex {
display: flex;
justify-content: space-between;
}
.row.flex:before,
.row.flex:after {
display: none;
}
.software-box-outer {
height: 200px;
border: 3px solid grey;
}
Fiddle is here: https://jsfiddle.net/xpufcsuk/
I tried adding .col-xs-12 to each .col-md-3 hoping this would make it go into full single columns (occupy all 12 cols) on mobile. But it doesn't.
You can use #media queries to make your website responsive.
#media (max-width: 760px) {
.flex {
flex-direction:column; //change the flex direction from row to column
}
}
Basically, when the screen-size is lower than 760px, you change direction to column
Example: ( lower resolution to 760px )
https://jsfiddle.net/972bdkvr/1/
If you want flexbox to work on only large deceives, you can use media queries.
Write you code into #media screen and (min-width:767px), so it will work only when device width > 767px
#media screen and (min-width:767px) {
.flex {
display: flex;
justify-content: space-between;
}
.row.flex:before,
.row.flex:after {
display: none;
}
}
.software-box-outer {
height: 200px;
border: 3px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row flex text-center">
<div class="col-md-3 software-box-outer">
<h1>
Testing 1
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 2
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 3
</h1>
</div>
</div>
</div>
Im making a login page using Bootstrap that is nested in a container
I know that the way that bootstrap works is with a grid system based on the width of the device you are using to view it on so for example if Im viewing the page on my Iphone it will look fine because the width of my phone is small enough so that the container is of manageable size.
However if I view the page on either a desktop or an ipad, the width of the container looks ridiculous because the Input fields take the width of nearly the entire page.
So my question is how could I set a width to my container (or the panel that contains the login form) without messing with the way it looks on the mobile version right now which is perfect. I know that by setting a manual width to it doesnt work because it also sets the width on the mobile device. Is there a simple way to do this that I just havent seen in the documentation?
This might help you:
#media (min-width: 768px) {
.container-small {
width: 300px;
}
.container-large {
width: 970px;
}
}
#media (min-width: 992px) {
.container-small {
width: 500px;
}
.container-large {
width: 1170px;
}
}
#media (min-width: 1200px) {
.container-small {
width: 700px;
}
.container-large {
width: 1500px;
}
}
.container-small, .container-large {
max-width: 100%;
}
Then you can use the classes: container-small and container-large alongside the container class, like so <div class="container container-small">
This is a code for a small middle container which would look something like
Here is the code
.small-middle-container{
margin: auto;
width: 40%;
}
<!DOCTYPE html>
<html>
<head>
<title>Student Managment</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="small-middle-container">
<div class="row">
<a href="index.html">
<button class="pull-right btn btn-success col-md-2" style="margin-top: 1em;">
Add
</button>
</a>
</div>
<div class="form-group">
<form>
<div class="form-group row" id="modalElement" style="margin-top: 2em;">
<label for="SubjectId" class="col-sm-2 col-form-label">Subject Id</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Subject Id" required>
</div>
</div>
<div class="form-group row" id="modalElement" style="margin-top: 2em;">
<label for="SubjectName" class="col-sm-2 col-form-label">Subject Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Subject Name" required>
</div>
</div>
</form>
</div>
</div>
</body>
</html>