I'm trying to align a row of buttons on the bottom but also have two rows of text at the top both justified left using twitter bootstrap. Here is what I'm trying to achieve:
Here is a jsfiddle of my recent attempt:
My current css files look like this:
.profile-avatar {
position:relative;
height:170px;
}
.profile-avatar img {
height: 160px;
width: 160px;
margin-left: 20px;
}
.profile-buttons {
margin-left: 15px;
margin-top: 110px;
}
I'm completely lost on how to add two rows of text to the top right of the image above the three buttons.
Any thoughts?
Thanks,
-Paul
http://jsfiddle.net/kks6h0bc/7/
.text-0,.text-1{
position: absolute;
top: 0px;
left: 200px;
display:block;
}
.text-0{
top: 0px;
font-size:30px;
}
.text-1 {
top: 50px;
}
Try with position: absolute; (watch fiddle)
Check this Fiddle. I Hope it helps.
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
<div class="profile-avatar">
<div class="row">
<div class="col-xs-12">
<img src="http://www.kanorika.com/friendly/demo/data/avatars/min4/SyWH14RnFCt.jpg" class="profile-img img-responsive"/>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
Large Text<br>Small Text
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default profile-buttons">Default</button>
<button type="button" class="btn btn-default profile-buttons">Default</button>
<button type="button" class="btn btn-default profile-buttons">Default</button>
</div>
</div>
</div>
</div>
</div>
</div>
Related
The title might be misleading, but I didn't know how else to name it.
In any case, I need to have an div/image inlined with a text, and a button beneath that text. The issue is, I can't really make the button take the full width without adding any padding, no matter what I try.
To make my explanation clearer, here's an image of what I'm trying to make:
And I'm trying to use Bootstrap 4 utilities only.
This is my code so far:
.col-md-3 {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
}
.btn {
background-color: #292a2c;
color: #ededed;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
How can I make this work? Also, the div with a class .img is a placeholder in a way, and needs to stay like that.
Thank you!
You can achieve this by using bootstrap media object with no additional css. Please see code snippet below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="media">
<img src="https://via.placeholder.com/188x88" class="mr-3" alt="">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<button class="btn btn-primary btn-block">Button</button>
</div>
</div>
</div>
</div>
</div>
You can try something like this, then style it accordingly:
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ79Qe630Fli9-SIDz188GQURmrRfhh6AksMKexPP5JvsE7AJ6t01mf5A">
</div>
<div class="col-8">
<div class="row">
<p>text</p>
</div>
<div class="row">
<button>button</button>
</div>
</div>
</div>
</div>
Here is the code for getting as shown in the image
'<div class="col-md-12"><div class="row"><div class="col-md-3"><div class="row"><div class="img"></div></div></div>
<div class="col-md-6"><div class="row">
<h6 class="m-auto">Text goes here</h6><button class="btn rounded-0 btn-block">Button</button></div></div></div>
For style use the style in your question
You could do something like this.
Note that Bootstrap by default does not have a black background class so you would have to create one.
.bg-black {
background-color: #000 !important;
border: 2px solid #000 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid"> <!-- Make it full width -->
<div class="row d-flex"> <!-- display flex -->
<div class="col-4 align-self-stretch"> <!-- stretch the column -->
<img class="w-100" src="http://placehold.it/200x200" />
</div>
<div class="col-8 align-self-stretch"> <!-- stretch the column -->
<p>Some Text Here.<br/> Can be long or short</p>
<p>Yet another paragraph</p>
<p>And one more paragraph</p>
<button class="btn btn-primary bg-black btn-block rounded-0">Btn Txt</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
.col-md-3 {
background-color: #ededed;
width:100% !important;
}
.col-md-3> div{
display:inline-block;
float:left;
width: 60%;
height:100%;
}
.img {
width: 15% !important;;
height: 88px !important;
background-color: #292a2c;
display:inline-block;
}
.btn {
width: 60%;
background-color: #292a2c;
color: #ededed;
height:50%;
display:inline-block;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
Everything looks good just make sure that you have bootstrap.css file in right place and make sure that its working.
I made some changes to your code, its a bit hard coded but u must take care to overwrite bootstrap classes and don't change them directly.
.box {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
float: left;
margin-right: 5px;
}
.text {
float: left;
}
.btn {
background-color: #292a2c;
color: #ededed;
margin-top: 33px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 d-flex p-0">
<div class="box">
<div class="img"></div>
<div class="text">
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
</div>
I have a client who would like to have a sold text on top of all of her pictures that were sold on the bottom left corner of each image. I have the implementation done but the problem is that some images are different in size. Is there a "one class fits all" type of css I can use to position the text correctly regardless of the image's size?
The Code:
.sold-overlay {
position: absolute;
top: 80%;
left: 59%;
width: 25%;
border: 1px solid #e60000;
color: white;
font-size: 50%;
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>I Am Travon Martin</h2>
<img class="img-responsive img-centered" src="img/portfolio/sold/img-6847.jpg" alt="">
<h2 class="sold-overlay">Sold</h2>
<p>I'm sorry, this artwork has been sold to a happy customer.</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
I positioned the red Sold banner at bottom left and also sized the image at 100% so it will always fill its column/responsive container:
.sold-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 25%;
border: 1px solid #e60000;
color: white;
font-size: 50%;
background-color: red;
}
.relative {
position: relative;
}
.relative img {
display: block;
width: 100%;
}
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>I Am Travon Martin</h2>
<div class="relative">
<img class="img-responsive img-centered" src="http://placehold.it/200x100" alt="">
<div class="sold-overlay"><h2>Sold</h2></div>
</div>
<p>I'm sorry, this artwork has been sold to a happy customer.</p>
</div>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
Hello, i'm kinda new at css/bootstrap, i'm learning actually.
In this case, i will probably need to add some css at "chat_funcs" div, but i don't know what to write to get what i want.
The problem:
What i want is:
My code so far:
HTML:
<div id="chat" class="col-md-3 col-xs-12">
<span class="titulo">Chat</span>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
</div>
<div id="chat_funcs" class="pull-right col-md-3 col-xs-12">
<div class="pull-left">
<input class="form-control" type="text">
<input class="btn btn-default" type="button" value="Enviar">
</div>
</div>
CSS:
#chat {
background-color: red ;
overflow: scroll;
overflow-x: hidden;
height: 80%;
position: absolute;
right: 0;
display: inline-block;
}
In order to achieve this you are going to use additional html div container. There're other ways too, but this one came to my mind first.
Here is html markup:
<div id="chat-container" class="col-md-3 col-xs-12">
<div class="row">
<div id="chat" class="col-md-12 col-xs-12">
<span class="titulo">Chat</span>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
<div class="msg">Mensagem teste</div>
</div>
</div>
<div class="row">
<div id="chat_funcs" class="col-md-12 col-xs-12">
<div class="pull-left">
<input id="message-text" class="form-control" type="text"><br/>
<input class="btn btn-default" type="button" value="Enviar">
</div>
</div>
</div>
</div>
and here is css:
#chat-container{
position: absolute;
right: 0;
width: 160px;
}
#chat {
background-color: red ;
overflow: scroll;
overflow-x: hidden;
height: 80%;
width: 100%;
display: inline-block;
}
#message-text{
width: 140px;
}
here is a fiddle
I hope this helps
I've got a partial view that I want to have a sticky footer on. Unfortunately the scrollable div overflows with my footer no matter what I try.
<div id="wrap">
<div class="container">
<div class="scrollable">
<div class="scrollable-content">
<div class="list-group">
<a ng-repeat="msg in chatmessages" href="#" class="list-group-item">
<div class="bubble bubble-{{msg.dir}}">{{msg.text}}</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<form class="row row-chat">
<div class="input-group">
<input type="text" class="form-control" ng-model="messageText" placeholder="Type your message" />
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Send</button>
</span>
</div>
</form>
</div>
</div>
Custom CSS:
#wrap {
min-height: 100%;
height: auto !important;
margin: 0 auto -60px;
}
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
fix the footer with the specifec height like using styles
#footer
{
top:1200px;
left:300px;
}
I'm using bootstrap 2.3.2. I have a div with some wells inside. Here is a Preview
My structure is
<body>
<div class="page-header">
<h1 id="title">Title</h1>
</div>
<div class="row">
<div class="span3 my_span">
<div class="well my_well">
<h1>Text</h1>
<hr>
<p>More Text</p>
<hr>
<button class="btn btn-primary">Button</button>
</div>
</div>
<div class="span3 my_span">
<div class="well my_well">
<h1>Textr</h1>
<hr>
<p>More Text</p>
<hr>
<button class="btn btn-primary">Button</button>
</div>
</div>
<div class="span3 my_span">
<div class="well my_well">
<h1>Textr</h1>
<hr>
<p>More Text</p>
<hr>
<button class="btn btn-primary">Button</button>
</div>
</div>
</div>
</body>
The wells are inside a row div, how to center all the wells horizontally?
Here is the jsfiddle with the code.
I think this is what you were describing: Fullscreen View
See jsfiddle
I modified my_span:
.my_span {
width: 300px;
margin: 0 33px;
float: none;
display:inline-block;
}
and added:
.row {
text-align: center;
margin: 0;
}
EDIT: I edited the fiddle a bit to fix the margins.
Just use margin: 0 auto to set your divs to be centered.
.my_span {
width: 300px;
margin: 0 auto;
}
http://jsfiddle.net/BVmUL/367/
You can do
.parent-of-centered-div {
text-align: center;
}
.centered-div {
display:inline-block;
width: 20px; /* needs fixed width */
}