Hi im kind of new to coding, but eager to learn, im trying to make a new website from scratch and wanted to set up a picture on the left and then next to it on the right something like this...This is the closest i could find.
i can get the image on the left and the icons and text on the right, just not the text to the right of the icons... and cant seem to find any examples. If someone could give me a hand i would be very appreciated.
https://www.w3schools.com/css/css_float.asp
I think this is what you want. In other words, just add text and img link in the html and in css style sheet, use float: left and padding.
Is this what you are trying to implement ? Lookup Bootstrap grid for more help https://getbootstrap.com/docs/3.4/css/
Also you can show your code to make your question more clear.
<!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.3.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">
<h1>Bootstrap grid system</h1>
<p>select from 12</p>
<br>
<div class="row">
<div class="col-md-4">
<img src="img.png" class="img-responsive">
</div>
<div class="col-md-8">
GG
<h1>GLHF</h1>
</div>
</div>
</div>
</body>
</html>
Related
I looked through the official Bootstrap grid layout page and there are many examples of alignment. I am looking forward to a class that will make the layout like
Every content of the first column will start with right alignment and every content of the second column will start with left alignment. If we use justify-content-center class then every content starts with the center. I know how to do it using CSS but I don't want to do this for every content.
Do you have any class that class will set every content in the right alignment?
I hope this is what you're looking for:
Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md text-right">
<img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
<h1>Hello World</h1>
<p>Bootstrap grid</p>
</div>
<div class="col-md">
<img src="https://via.placeholder.com/200x150/000000/FFFFFF/" />
<h1>Hello World</h1>
<p>Bootstrap grid</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- 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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled
This question already has answers here:
Remove Microsoft Edge's phone number styling
(4 answers)
Closed 3 years ago.
I have a relatively simple bit of markup on the header of a website I'm redesigning and it seems to display fine on browers I've tried but a rather odd thing happens in Edge (on Windows 10): the phone number in the header shows up underlined, as if it is a link, and when I click on it, it asks if I want to open Zoom. I know Zoom is a videoconferencing app but I don't even have it on my laptop where I am displaying this website so I'm not sure why it wants to offer to take me into Zoom. I just want to display a phone number and make it stand out a bit by colouring it differently than the surrounding text!
Here is a JSFiddle that shows my HTML and CSS (inline). And here's the code from the JSFiddle:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#phoneno {
color: aqua
}
</style>
</head>
<body>
<div class="container-fluid">
<div id="page-content">
<div id="header">
<div class="row">
<div class="col-sm" id="Jones Chiropractic">JONES CHIROPRACTIC</div>
<div class="col-sm text-right" id="Doctor">Dr. Fred Jones</div>
<div class="col-sm ml-auto text-right" id="JonesContact">
123 Main St. W.<br> St. Louis, MO<br> Phone <span id="phoneno">(555) 555-5555</span><br> Fax (555) 555-5556 <br> joneschiropractic#gmail.com
</div>
</div>
<!-- row -->
</div>
<!-- header -->
</div>
</div>
</body>
</html>
Why does Edge underline the (first) phone number (but not the fax number) and why does it want to open Zoom? How do I make it just display it without the underline and persuade the browser not try to launch Zoom?
You should be able to override this if you put the following in the head section for your page:
<meta name="format-detection" content="telephone=no">
This page has more information on this.
I want to create a html page with first row which has a sidebar menu and div for showing the KPI metrics. I would like to make this KPI metrics div fixed.
Below this KPI metrics is a div for tables. Now when the user scrolls through the table the KPI metrics div should always be fixed. I would also like to know how to align the KPI metrics div and the table div aligned on the right side. I have figured that I could add position : fixed for the KPI div. But not sure how to align the table div on the right side.
<!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.3.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">
<p>KPI DIV TO BE FIXED</p>
<div class="row row-no-gutters">
<div class="col-sm-4" style="background-color:lavender;">SIDEBAR</div>
<div class="col-sm-8" style="background-color:lavenderblush;">KPI DIV</div>
</div>
<br>
<p>TABLE DIV BELOW KPI DIV</p>
<div class="row">
<div class=" offset-md-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
</div>
</div>
</body>
</html>
Here's a start for you:
https://codepen.io/panchroma/pen/zXBVRp
I'm not clear where you need to go from here though. Let me know if you need more help.
The HTML is very close to what you posted, my only changes are on lines 21 and 23 where I modified the classes.
<div class="row row-no-gutters">
<div class=" col-md-offset-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
Good luck!
I have the following page which is displayed correctly with the TOP BAR taking the entire top space and the 3 other divs displaying next to each other below it.
However on Chrome it stacks everything on top of each other no matter what size the browser is. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Whatever</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<h1>Hello!</h1>
<div class="container">
<div class="row">
<div class="col-xs-12">
TOP BAR
</div>
</div>
<div class="row">
<div class="col-sm-4">
I am left
</div>
<div class="col-sm-4">
I am center
</div>
<div class="col-sm-4">
I am right
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
In order to reproduce this please link to the bootstrap files using the integrity constraint.
Thanks to Jdsfighter's comment after opening the console I saw the following errors:
Failed to find a valid digest in the 'integrity' attribute for
resource
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'
with computed SHA-256 integrity
'7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw='. The resource has been
blocked.
Failed to find a valid digest in the 'integrity' attribute for
resource
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'
with computed SHA-256 integrity
'KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo='. The resource has been
blocked.
For some reason the integrity check did not work on my instance of Chrome and as the result I had to remove them.