How to set 3 images on bootstrap left, center and right on same line
I tried that:
<div class="row">
<img class="col-md-3 pull-right" src="images/right.png" alt="right">
<img class="col-md-3 center-block" src="images/center.png" alt="center">
<img class="col-md-3 pull-left" src="images/left.png" alt="left">
</di>
But the second image is not centered.
The right and left image, should be in the corner of the page.
Is it what you want to achieve?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><img alt="" src="//placehold.it/200x200/c69/fff/?text=left" class="img-responsive"></div>
<div class="col-md-4"><img alt="" src="//placehold.it/200x200/9c6/fff/?text=center" class="img-responsive center-block"></div>
<div class="col-md-4"><img alt="" src="//placehold.it/200x200/69c/fff/?text=right" class="img-responsive pull-right"></div>
</div>
</div>
You just need to give col-md-4 to each img check out the sample. Run the code snippet and open it in a full page to view properly.
or
Follow the link to view the sample: Sample Link
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="right">
<img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="center">
<img class="col-md-4" src="http://vignette1.wikia.nocookie.net/logopedia/images/a/a4/Google-Currents-Featured-300x300.png" alt="left">
Related
The carousel fades into the next slide when I click the next/previous buttons, even though I have added the 'slide' class.
<div id="testimonials-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color: red;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: yellow;">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" style="background-color: blue;">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I want the slides to slide smoothly and not fade. Can you guys tell me if I'm doing something wrong or guide me through how I should be doing it
your code work and no problem and slide smoothly, try this strucktur in your html
<head>
<link href="your.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
</head>
<body>
//your html
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
I'm trying to build my website, and so far have found some answers in this site that have helped me out, but I keep running into some roadblocks.
Currently, I'm making a boot strap carousel and found ways to have the carousel resize the image height using this answer:
https://stackoverflow.com/a/42461191/10654813
<head>
<style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
The problem I'm having now, is that images with different widths are stretched out. What code do I need so the width of the images is respected?
Here's the code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<title></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.3.7/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.3.7/js/bootstrap.min.js"></script>
<style>.carousel-inner>.item > img {width:100%; height:100%;} </style>
</head>
<body>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1_60hiP6f26VTAhBtoXmVV1ogtQZW_l4q">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1NNF4sPI3Z0rieJ4moFnpWM9w-c4TUnIt">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=14Vn0Qa3jKJ9e0GvOxRlHFAoMJ2ElACbE">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nIwPiI5pO3lpXaEzddXRdhYMIOznYwBI">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1nVy7T-10TrpYgdFbSZz356SpT9JJWvWS">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1s2CnnBlNDBzR2XuF53wQqt3lMQXS5z8a">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=19uPB4nECcIySfAQ48WwaLtm1jkxMzzQM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=18eQZcE7U1Sz4xgXJ_jE2uUnudWI6W79O">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=17qqNdGtcLdqnWwl_TAkzZIw-kagBd250">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=15KMQit_RIiHfyLocGO6jwhnmf_lrUPne">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1A3LocibiAvtRj931vPZowZ5hOqmZ9bXu">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1vJrKy2x7Jj2nY5TzuNfw1VPQn7hJXeoM">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1wU2iv5IxUhHallwdzOHXqbwn6ufT-rNx">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1zbCjc0Y1uCiMNLwm-7k7U-q9lMYWoeR6">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1OQ7UnEvXl1pZww9hOJE1LZy-K9x28VY9">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1VHLX_7fuu_i0-1zlsYNbJZxTI-RebH7X">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1gml2FIqIddrQGz8gaB8B_ziYb682ko_e">
</div>
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1mrHn0jMeCuXUpQDafcm64fi03Vx7uucw">
</div>
</div>
</a>
</div>
</div>
</body>
</html>
Changing width: 100% to max-width: 100% should do the trick.
.carousel-inner > .item > img {
max-width: 100%;
height: 570px;
}
I need someone who knows materializecss to tell me is it possible to make this with materializecss? I googled but didnt find anything for materializecss.
So I am looking for somthing like in this example https://www.codeply.com/go/zAc3W2rzOd
Yes there is a way to slide divs in materializecss. You can actually find some examples at their website. Click here for the examples.
I simply copied one of their slider examples and pasted it into this jsfiddle and the section below.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.css" />
</head>
<body>
<div class="container" style="padding-top:100px;">
<div class="carousel carousel-slider center" data-indicators="true">
<div class="carousel-fixed-item center">
<a class="btn waves-effect white grey-text darken-text-2">button</a>
</div>
<div class="carousel-item red white-text" href="#one!">
<h2>First Panel</h2>
<p class="white-text">This is your first panel</p>
</div>
<div class="carousel-item amber white-text" href="#two!">
<h2>Second Panel</h2>
<p class="white-text">This is your second panel</p>
</div>
<div class="carousel-item green white-text" href="#three!">
<h2>Third Panel</h2>
<p class="white-text">This is your third panel</p>
</div>
<div class="carousel-item blue white-text" href="#four!">
<h2>Fourth Panel</h2>
<p class="white-text">This is your fourth panel</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.js"></script>
<script>
$('.carousel.carousel-slider').carousel({fullWidth: true});
</script>
</body>
</html>
In order to make these sliders work materializecss uses the jQuery plugin Carousel which also has some options.
I have a layout with three rows. I would like the first row to have one column that spans all 12 columns at the xs size. At larger sizes I would like two columns, one 9 columns wide and one 3 columns wide. I have attempted this by adding the second column and making it hidden at xs and visible and 3 wide at sm.
However, doing so breaks the layout of my second row at larger screen sizes for some reason. I'm not sure why.
Code working before adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Page w/o Sidebar</li>
<li>Menu Item 3</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
Code broken after adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="hidden-xs col-sm-3 visible-sm ">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
I seem to have figured out the solution. I'm setting the column that I want hidden as visible on small, medium, and large, and setting it to 3 columns on small screens or larger.
I also added a div between the rows with the clearfix class.
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="visible-sm visible-md visible-lg col-sm-3">
<div id="logo">
<p>This is the hidden area</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<!-- rest of the code from before -->
I am new to Bootstrap and I am having trouble trying to get my layout to work based on device resolution. I'm testing using Apple devices only right now, but when I open my page on an iPhone, I want my format to be XS and show my information in 2 columns. If the device is SM or larger, I want my information to show in 4 columns. With my sample below, my iPhone 5s shows the information in 4 columns (looking at display held vertically, long ways top/bottom), not 2. What am I doing wrong?
<div class="panel panel-default">
<div class="panel-heading"Panel Header</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4 col-sm-2 text-right">First:</div>
<div class="col-xs-8 col-sm-4 text-left">John</div>
<div class="col-xs-4 col-sm-2 text-right">Home:</div>
<div class="col-xs-8 col-sm-4 text-left">905-555-1111</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-2 text-right">Last:</div>
<div class="col-xs-8 col-sm-4 text-left">Smith</div>
<div class="col-xs-4 col-sm-2 text-right">Work:</div>
<div class="col-xs-8 col-sm-4 text-left">905-555-2222</div>
</div>
</div> <!-- panel body END -->
</div> <!-- panel END -->
Sample in jsfiddle
This happens when the meta viewport is missing:
<meta name="viewport" content="width=device-width, initial-scale=1">