https://jsfiddle.net/aq9Laaew/17194/
I want 8 columns to be centered in the middle of the page but I'm having trouble actually getting it to stay in the middle and wrap properly when used at different device sizes.
Below is the relevant code for this part of the website. The wrapping issue with the text is shown in the large breakpoint I believe, and by the medium breakpoint things look fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Zac Litwinchuk : About</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\style.css">
<script defer src="js\fontawesome-all.min.js"></script>
</head>
<body class="bg-secondary">
<div class="container-fluid bg-light">
<div class="col-md-10 offset-md-2 my-3 px-0 ">
<h2>Get In Touch</h2>
<p>Please feel free to contact me via the below form</p>
<p>Do not hesitate to contact me via social media. My social media links are in the footer section of my website.</p>
<p>A downloadable version of my resume is available at the below link.</p>
<a class="btn btn-success text-light">Download My Resume</a>
</div>
<hr>
<form class="offset-md-2 my-3 ">
<div class="form-row">
<div class="form-group col-md-5">
<label>First Name</label>
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group col-md-5">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-10">
<label>Email Address</label>
<input type="email" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-10">
<label>Your Message</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success btn-lg">Send</button>
</form>
<footer class="row bg-dark text-light">
<div class="col-md-8 mt-2 mb-1">
<p> © | 2018</p>
</div>
<div class="col-md-4 text-right mt-2 mb-1">
<a class="text-light" href="#"><i class="fab fa-twitter-square fa-2x mr-1"></i></a>
<a class="text-light" href="#"><i class="fab fa-linkedin fa-2x mr-1"></i></a>
</div>
</footer>
</div>
<script src="js\jquery-3.2.1.slim.min.js"></script>
<script src="js\popper.min.js"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\typewriter.min.js"></script>
Try this
col-md-10 mx-auto instead of col-md-10 offset-md-2 my-3 px-0
You're very close to your desired result but there are some structural errors in your approach. You haven't wrapped your .col-*-* inside the .row element which will always result in your columns being slightly 'wrong' in their layout. The other issue is that offset-*-* applies to both the left and right right. So offset-md-2 actually means "Offset this column by 2 on the left, and 2 on the right".
A minimal approach demonstrating your desired layout would look something like the below code. I've added classes to show/hide certain text at various breakpoints so you can see how it would adjust:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="bg-success p-4 text-light d-block d-md-none d-lg-none"><strong class="mr-2">XS:</strong>I am 12 columns with no offset.</div>
<div class="bg-danger p-4 text-light d-none d-md-block d-lg-none"><strong class="mr-2">MD:</strong>I am 10 columns with 1 offset left and right.</div>
<div class="bg-info p-4 text-light d-none d-lg-block"><strong class="mr-2">LG:</strong>I am 8 columns with 2 offset left and right.</div>
</div>
</div>
</div>
You'll need to expand the snippet to view all the breakpoints so you can see how offset works in conjunction with col.
Related
How can I center a div vertically in bootstrap 5?
It should be aligned in the middle between of content before the div and the screen end.
Tried this:
<div>some content</div>
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div>div that should be centered</div>
</div>
It makes the pages longer than it actually is. The div doesn´t looks centered.
You can do it like this:
Wrap everything with one div that has 100% screen width and height.
Use flex-grow-1 for the second div so it takes the remaining height and center everything inside.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100">
<div>This div is not centered.</div>
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<div>This div is centered.</div>
</div>
</div>
</body>
</html>
<!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" />
<title>Document</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<style>
.card
{
min-width: 320px;
width: 480px;
}
</style>
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100">
<div class="card shadow-lg">
<div class="card-header text-bg-danger">
<h2>
<i class="fa-solid fa-user"></i>
Login
</h2>
</div>
<div class="card-body">
<form action="">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input
placeholder="your registered email"
class="form-control"
type="email"
name="email"
id="email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
placeholder="your password"
class="form-control"
type="password"
name="password"
id="password"
/>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-danger">Login</button>
<button type="reset" class="btn btn-secondary">Reset all</button>
</div>
</form>
</div>
</div>
</div>
<script
src="https://kit.fontawesome.com/266b76cb57.js"
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
I am trying to set a redigera button after the avsluta button
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
why my redigera button not set after the avsluta button
what I am trying
first I give the space 4 and then 4 and then 4 but avsluta button is set the below line
again I give the space 4 and then 3 and then 2 but avsluta button is set the below line
but not work
I am making a mistake partition of bootstrap or too many space I give
Reference:
Add "d-flex flex-row" to the div containing the buttons.
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4 d-flex flex-row">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
Just add btn class for the button. By default all html elements are block elements. This will take a complete row for the display of the element. adding btn class will make the button an inline-block element. This will allow multiple elements in the same line.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control btn btn-primary" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control btn btn-primary" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
I am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
I am trying to move an input group inside of my page header. When I try to use a row with columns, the HR doesn't run all the way through which bothers me.
This is what I am trying to achieve:
<div class="row">
<div class="col-md-8">
<div class="page-header">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/eo75juzL/
I am just trying to move the search input group to be right-aligned with the H3 and keep the line running all the way through.
I've updated your fiddle.
The horizontal line is part of the page-header, so I moved your columns within this div. Normal bootstrap behavior now applies, and your search box is right aligned.
To place your search box inside header You need to add this css.
.dash_input {
margin-top: -30px;
}
.dashboard {
margin-top: -40px;
}
.dash_input {
margin-top: -30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div class="page-header">
<div class=" dashboard col-md-8 col-lg-8 col-sm-8 col-xs-8 ">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
<div class="dash_input col-md-4 col-lg-4 col-sm-4 col-xs-4 pull-right">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
</div>
</body>
</html>
You had some problem with your div mark-up. tried to fix that. take a look at the above snippet. Also I would suggest you to use class="navbar". in that case you would have more flexibility.