I am new to LESS, started working with it and the issue I am facing is that I can't get the bootstrap row/column to work. I want three thumbnails to appear side by side (i.e. three columns in one row) but it won't happen. Is it because I have messed up any of the LESS files?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:900,700,400,500|Open+Sans:400,700,300|Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!-- the bootstrap compiled file outputted from LESS -->
<link href="_/css/bootstrap.css" rel="stylesheet" media="screen">
<!-- compiled version of my styles, outputted from LESS file where I edit my styles -->
<link href="_/css/mystyles.css" rel="stylesheet" media="screen">
</head>
<body>
<section class="container">
<h2>Heading</h2>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="images/blacksea.jpg" alt="...">
</a>
</div> <!-- thumbnail 1 -->
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="images/blacksea.jpg" alt="...">
</a>
</div> <!-- thumbnail 2 -->
<div class="col-md-3">
<a href="#" class="thumbnail">
<img src="images/blacksea.jpg" alt="...">
</a>
</div> <!-- thumbnail 3 -->
</div> <!-- row -->
</section> <!-- container -->
<script src="js/bootstrap.js"></script>
<script src="js/myscript.js"></script>
</body></html>
I tested my code on a normal boostrap setup (without Less) and it is working perfectly fine. But when the same code in my LESS set up the pictures get stacked vertically rather than horizontally.
Having seen it work on jsfiddle, I think the reason it is not working locally is because there may be some issue with my Bootstrap import, because for a verification, when I tried to do this feature of Bootstrap it did not work and I got this instead, so something to do with Bootstrap?
Thank you in advance!
Related
So, I've this little piece of test code where I'm trying to fit an image into the parent div as below in BS5. The challenge is that the image leaves a sizeable gap width-wise. This inspite of using .img-fluid class. Outcome attached which isn't ideal. There's a big gap.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<section class="container-fluid">
<div class="row g-0 h-50 border border-2 border-success ">
<div class="col-6 px-0"></div>
<div class="col-6 px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Why not write an inline css.
<img src="image-header-desktop.jpg" alt="" style="width: 100%">
I think your col-6 that has the image inside it... It's making the thing appear just on the left side of the page?? This should work...
<div class="col-6 mx-auto px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
Tha above only takes your normal thing and centers it on the page, I only added mx-auto to center the Div which contains your image.
You could also try col-8 col-9 col-10 to make the image bigger. It will still be fluid and extend the full width no matter how many columns wide you are. Naturally you wouldn't want it fluidly expanding larger than it's normal pixel size though.
P.S I'm self taught so I'm sorry about the lack of proper terms and info.
I'm using bootstrap containers and stuff and I know that they adjust the dimensions of whatever is in them based on how many columns there are (I'm using col-md-4 for the columns and it fits 3 photos per column)
I used that on 6 images and I have a 7th one to use. I centered it using flex but while it centers, the dimensions are not the same since it's the only image in that row and not automatically readjusted to be the same as the others. And when I remove the centering it looks perfect dimensions wise since its under the same group of photos but its aligned on the left of the screen since it's the first photo in the new row which makes sense.
<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">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
<div class="d-md-flex justify-content-center">
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
</div>
</div>
This is an example of what I'm trying to create and you can see how when i justify center it, it looks bigger than the rest and doesn't follow the same dimensions as the previous one had them distributed among the three of the photos
It's my first time posting here so please let me know if i need to add something to the code next time to make it easier to read
i shared a working Example i hope is that what u want and if not please provide a example/screenshot of what u desire and please view in full screen while run code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row p-2" style="row-gap: 10px;">
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
<div class="col-md-4">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" class="img-fluid">
</div>
</div>
</div>
</body>
</html>
The problem I had trouble with seems to be from the version of bootstrap I'm using (5.0.2) . I noticed with the answers I was given that the code was similar to mine and when I tried to use the version posted by the very helpful people, it fixed my code! I will have to research which version of bootstrap to use from now because I had no prior sources to this and just used the latest one.
Take a look at the edited code in my post for the working version!
This has been my very first question, thank you all for your great help!
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
I've been trying to load a simple html page with a carousel but the carousel does not fit the screen. Here is a screenshot:
Html page
And below is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Carousel / Slider</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- My Custom CSS -->
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="my-slider"class="carousel slide" data-ride="carousel">
<!-- Indicators dot nav -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/apple.jpg" alt="Fruits"/>
<div class="carousel-caption">
<h1>Assorted Fruits</h1>
</div>
</div>
</div>
<!-- Controls Next Prev buttons -->
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I don't know what is making the carousel to not fit the screen. I'm just beginning to learn frontend so if anyone could give a detailed explanation, I would be grateful.
EDIT: This is what it looks like if I add more than one picture to the carousel: The same page
Here is the working design.
You have missed a lot of code due to which it makes unworkable and also I didn't see the code for the second image. Rule is you will have to include all the images inside its respective class="item".
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="one.jpg" alt="...">
</div>
<div class="item>
<img src="two.jpg" alt="...">
</div>
</div>
This example was using data-attributes (data-ride="carousel"). You can also achieve this using Java script by calling carousel class manually $('.carousel').carousel()
Important Note : Always include Jquery before the bootstrap.js(or any library) file to avoid any bugs.
you html seems invalid the scripts tags should be on the head tag close to your stylesheet, another thing that that you forgot to close the head and open de body
My embed method is coded like that:
<embed type="text/html" src="header.html">
Now, I succeeded to embed the header.html file into the index.html but as a result I got also a weird long padding gap from the top header.
This is the header.html file:
<div class="top-main-area text-center">
<div class="container">
<a href="index.html" class="logo mt5">
<img src="img/logos/logo4.png" />
</a>
</div>
</div>
<header class="main">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- MAIN NAVIGATION -->
<div class="flexnav-menu-button" id="flexnav-menu-button">Menu</div>
<nav>
<ul class="nav nav-pills flexnav" id="flexnav" data-breakpoint="800">
<!-- a couple of li here -->
</ul>
</nav>
<!-- END MAIN NAVIGATION -->
</div>
<div class="col-md-6">
</div>
</div>
</div>
</header>
<div class="gap"></div>
Here is how I embed it in the index.html:
<head>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/font_awesome.css">
<link rel="stylesheet" href="css/styles.css">
<!-- IE 8 Fallback -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body class="boxed bg-cover" style="background-image: url(img/backgrounds/wood.jpg)">
<div class="global-wrap">
<embed type="text/html" src="header.html">
I tried to play with the CSS settings but i didn't succeed.
Why i keep getting that long padding gap?
I tried to play with the CSS settings but i didn't succeed.
It is a separate (and invalid) document. <embed> is functioning as a (poorly defined) <iframe>.
You are missing the Doctype and the head element. You don't have a stylesheet in it, so you get the default margin / padding on the body element.