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'm trying to learn materialize CSS framework and I'm facing a little problem. It appears messy when I add a search input or when I add a grid system. I don't know why.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title></title>
</head>
<body>
<nav>
<div class="row">
<div class="col s12 l12">
<div class="nav-wrapper navbar-fixed">
<div class="row">
<div class="brand-logo left col s12 l4">
opplance
</div>
</div>
<div class="row">
<form class="col s6 l4 " method="GET">
<input type="search" name="" value="">
<button type="submit" name="button" class="btn"> <i class="material-icons">search</i>
</button>
</form>
</div>
<div class="row">
<ul class="right col s6 l4">
<li> <button type="button" name="button" class="btn">Register</button> </li>
<li><button type="button" name="button" class="btn">Login</button></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>
https://jsfiddle.net/8tcupybL/
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/ussettler.css">
<link rel="stylesheet" type="text/css" href="css/sykesuss.css">
<body>
<div class="container-fluid">
<div class="row">
<div id="ussnav" class="col-12 col-md-12 nopadding">
<ul>
<li><img src="images/ussettler.png" id="logo"></li>
<li></li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div class="row">
<div id="ussbody" class="col-12 col-md-12 nopadding container-fluid">
<div class="row">
<div id="paneluss" class="col-9 col-md-9 nopadding container-fluid">
<div class="row">
<div id="contactuss" class="col-xs-12 col-md-12 nopadding container-fluid">
</div>
<div id="galleryuss" class="col-xs-12 col-md-12 nopadding container-fluid">
<!--<div class="carousel">
<div>1<img src="images/ussettler"></div>
<div>2<img src="images/ussettler"></div>
<div>3<img src="images/ussettler"></div>
<div>4<img src="images/ussettler"></div>
<div>5<img src="images/ussettler"></div>
<div>6<img src="images/ussettler"></div>
<div>7<img src="images/ussettler"></div>
</div>-->
</div>
<div id="teaminfouss" class="col-xs-12 col-md-12 nopadding container-fluid">
<div id="infotext"><p>More introduction on service and team.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="ussfooter" class="col-12 col-md-12 nopadding">
<ul class="footerlist fixedfooter">
<li>USSettler # 2017</li>
|
<li>Disclaimer</li>
|
<li>Privacy Policy</li>
|
<li>Join Our Team</li>
|
<li>Contact Us</li>
|
<li>
<span>Sign up for our updates</span>
</li>
<li>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
<script src="js/ussettler.js"></script>
In the fiddle above I am looking to add a reponsive image carousel to the middle section. There is an example in the mock image posted. I am new to carousel's and would prefer little to no javascript if possible. Or if anyone has a good link to where I can learn the html/css version or the javascript required to make one that would be awesome thanks!
Mock Webpage
I have following HTML code with bootstrap with a simple login. I want to make a box behind the login form and to be something like this.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Login Page</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HOVER CSS -->
<link href="css/hover-min.css" rel="stylesheet" media="all">
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="logo" class="col-xs-4 col-xs-offset-1">
<img src="img/tei.png" class="img-responsive" alt="Responsive image">
</div>
<!-- NAVBAR -->
<div class="navbar navbar-default navbar-custom navbar-fixed-top" role="navigation">
<div class="container container-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<!-- END NAVBAR -->
<!-- LOGIN BOX -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-6">
<div class="panel panel-default hvr-glow">
<div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="post">
<div class="form-group">
<label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label>
<div class="col-sm-9">
<input name="username" type="text" class="form-control" id="onoma-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label>
<div class="col-sm-9">
<input name="password" type="password" class="form-control" id="kwdikos-xristi" placeholder="" required="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label class="">
<input type="checkbox" class="">Να με θυμάσαι</label>
</div>
</div>
</div>
<div class="form-group last">
<div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-success btn-sm hvr-grow-shadow">Σύνδεση</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- END LOGIN BOX -->
<!-- HEADER -->
<div class="header">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
</div>
</div>
</div>
</div>
<!-- END HEADER -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And live at
Live here
I searched a lot for this border or box but i didnt find anything at all at bootstrap site.
Can anyone guide me of how to make this border and put the login box in the middle of the box and i will play with the margin top.
Thanks a lot for your time!
Wrap it in a container element. A "Bootstrap" way to do this would be something along the lines of nesting columns.
<div class="container">
<div class="row"><!-- new -->
<div class="col-md-12 form-container"><!-- new -->
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default hvr-glow">
<!-- rest of your markup -->
</div>
</div>
</div>
</div><!-- new -->
</div><!-- new -->
</div>
Style .form-container as needed; i.e. background-color: white; border-radius: 10px;.
I see you have a custom CSS selector on your navbar's .container element of .container-nav that limits the width of the navbar. You'd have to apply something similar if you wanted what I have above to only be as wide as the navbar.
It looks like this project is a work-in-progress as I foresee issues with your logo and the layout you currently have. So I think any answer you get won't be exactly on point.
Hope this gets you pointed in the right direction though.
I've been starting to explore Twitter Bootstrap, and I tried to write or replicate some of their example codes. I used a div with their .container class for the wrapper, and added some rows and columns in it. Having a div with a .container class supposedly centers the div automatically, but in my case, I'm having an unbalanced content. The white space on the left side is much wider than the white space on the right side. Here's the code (I'm not using any css styles):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Room</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='style.css' />
<!--responsive bootsrap here-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row"></div>
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div> <!-- first row -->
<div class="span12">
<div class="hero-unit">
<h1>Hey Mark! <small>and everybody!</small></h1>
<p>Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very passionate about film making. I love the idea on sucking on making films, spending $6m for my first feature film, which is my masterpiece of course! The title of my masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div><!-- second row -->
</div>
</div>
</body>
</html>
Here is the screenshot:
https://dl.dropboxusercontent.com/u/70465637/error_center.jpg
Notice how the left white space is wider than the right white space.
Help Please, thanks in advance.
Your div.span12 should be a child of div.row.
<div class="row">
<div class="span12"></div>
</div>
replace body tag with this
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
The Room
<ul class="nav">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Preview</li>
<li class="divider-vertical"></li>
<li>Blog</li>
<li class="divider-vertical"></li>
<li>About</li>
<li class="divider-vertical"></li>
</ul>
<form class="navbar-search">
<input type="text" class="search-query" placeholder="Search for...">
</form>
</div>
</div>
</div>
<!-- first row -->
</div>
<div class="row">
<div class="span12">
<div class="hero-unit">
<h1>
Hey Mark! <small>and everybody!</small></h1>
<p>
Hey Mark! I am Johnny, I am super boring, I love to play football, and I am very
passionate about film making. I love the idea on sucking on making films, spending
$6m for my first feature film, which is my masterpiece of course! The title of my
masterpiece, is "The Room" very catchy right? No, I did not hit her! I did not hit
her! I did NOT!</p>
<p>
<a class="btn btn-primary btn-large">Watch Movie</a>`enter code here`
</p>
</div>
</div>
<!-- second row -->
</div>
</div>
</div></body>
check your code properly your span12 div should come inside of <div class="row"></div>
your code should be something like this
<div class="container">
<div class="row">
<div class="span12"> your content goes here </div>
</div>
</div>
If you're still having trouble with the whitespace after putting your span12 div inside your row, then it might be because Bootstrap specifies its own margins and padding etc.
You may have to set your own margins or padding for your span. You can override the bootstrap styles in your CSS with the !important declaration:
.span12 {
margin-left: -50px !important;
}