12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

How to make an announcment box with Twitter bootstrap?

by Fking
8 replies
  • WEB DESIGN
    • |
I have it on a site anyway, and thought why not use it to make the announcment box.
But don't really have idea how to do it?

Infact I'm not even sure if it's a CMS or just a library of fancy css, fonts and images?
#announcment #bootstrap #box #make #twitter
  • Profile picture of the author Andrew H
    Hmm, announcement box. Maybe you are referring to a modal? Twitter Bootstrap makes implementation of modals dead simple.

    It's JavaScript

    Javascript · Bootstrap

    <!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Ã--</button>
    <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
    <p>One fine body…</p>
    </div>
    <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[7821420].message }}
  • Profile picture of the author Fking
    this popup box is pretty cool, but i need something within the site
    some rectangular for example just styled in a nice outstanding way
    {{ DiscussionBoard.errors[7821977].message }}
  • Profile picture of the author Andrew H
    Well that's dead simple.

    Put this in any loaded .css file:
    .rectanglebox {
    border:1px solid #cecece;
    -moz-box-shadow: 1px 1px 9px 1px #cecece;
    -webkit-box-shadow: 1px 1px 9px 1px #cecece;
    box-shadow: 1px 1px 9px 1px #cecece;
    }
    and here is your fancy new box:
    <div class="span4 rectanglebox">
    <p>Here is some text inside your nice new rectangle box</p>
    </div>
    (.span4 is a bootstrap box: http://twitter.github.com/bootstrap/...tml#gridSystem
    Adjust the styling accordingly.)
    Signature
    "You shouldn't come here and set yourself up as the resident wizard of oz."
    {{ DiscussionBoard.errors[7822139].message }}
  • Profile picture of the author Elshereef
    Use one of these default Bootstrap styles
    PHP Code:
    <p class="label">Some text here</p> 
    PHP Code:
    <p class="label">Some text here</p> 
    PHP Code:
    <p class="label label-success">Some text here</p> 
    PHP Code:
    <p class="label label-warning">Some text here</p> 
    PHP Code:
    <p class="label label-important">Some text here</p> 
    PHP Code:
    <p class="label label-info">Some text here</p> 
    PHP Code:
    <p class="label label-inverse">Some text here</p> 
    Signature
    Get your Responsive WordPress Theme for $649 only!
    Get Our Free Responsive WordPress Themes
    {{ DiscussionBoard.errors[7822416].message }}
    • Profile picture of the author Fking
      Thank you guys! Extremely useful!


      @Elshereef, Is there a place where I can see all those styles presented? Would be pretty handy to choose various elements.
      {{ DiscussionBoard.errors[7824442].message }}
  • Profile picture of the author Michael71
    Components · Bootstrap
    Signature

    HTML/CSS/jQuery/ZURB Foundation/Twitter Bootstrap/Wordpress/Frontend Performance Optimizing
    ---
    Need HTML/CSS help? Skype: microcosmic - Test Your Responsive Design - InternetCookies.eu

    {{ DiscussionBoard.errors[7824477].message }}
  • Profile picture of the author Fking
    yeah forgive my ignorance, just found it as well
    i need to sleep more!
    {{ DiscussionBoard.errors[7824491].message }}
  • Profile picture of the author mariya20
    Thank you so much for this Codes Guys
    {{ DiscussionBoard.errors[8031676].message }}

Trending Topics